/* =========================================================
   web16 指令工作台樣式（接在 web16-digital.css 之後）
   ========================================================= */
.w16s { margin: 26px 0 34px; border: 1.5px solid var(--dg-line-strong); border-radius: 18px; background: var(--dg-surface); box-shadow: var(--dg-shadow); overflow: hidden; }
.w16s * { box-sizing: border-box; }
.w16s .mono, .w16s code { font-family: var(--dg-font-mono); }
.w16s-head { display: flex; gap: 14px; align-items: center; padding: 16px 20px; background: var(--dg-deep); color: #fff; }
.w16s-no { font-family: var(--dg-font-mono); font-size: 11px; font-weight: 600; letter-spacing: .08em; background: var(--dg-orange); color: #fff; padding: 4px 9px; border-radius: 6px; flex: none; }
.w16s-head b { display: block; font-size: 18px; font-weight: 900; line-height: 1.4; color: #fff; }
.w16s-head small { display: block; font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.6; }
.w16s-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-bottom: 1px solid var(--dg-line); }
.w16s-why > div { padding: 14px 18px; font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); border-right: 1px solid var(--dg-line); }
.w16s-why > div:last-child { border-right: 0; }
.w16s-why em { display: block; font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--dg-teal-strong); font-weight: 600; margin-bottom: 3px; }
.w16s-why > div:nth-child(2) em { color: var(--dg-bad); }
.w16s-why > div:nth-child(3) em { color: var(--dg-ok); }
.w16s h6 { margin: 0 0 10px; font-family: var(--dg-font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: .06em; color: var(--dg-ink-faint); text-transform: none; }
.w16s-grid { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 0; }
.w16s-ctl { padding: 16px 18px; border-right: 1px solid var(--dg-line); background: var(--dg-surface-2); display: grid; gap: 10px; align-content: start; }
.w16s-row { display: grid; gap: 6px; font-size: 13px; }
.w16s-row > span { font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-ink-soft); }
.w16s-row input[type="range"] { width: 100%; accent-color: var(--dg-orange); }
.w16s-row input[type="color"] { width: 100%; height: 36px; border: 1px solid var(--dg-line-strong); border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.w16s-row input[type="text"] { font: inherit; font-size: 14px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--dg-line-strong); width: 100%; min-width: 0; background: #fff; }
.w16s-row output { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink); }
.w16s-row .dg-seg { width: 100%; }
.w16s-row .dg-seg button { flex: 1; padding: 7px 8px; font-size: 12.5px; }
.w16s-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.w16s-multi button { appearance: none; font: inherit; font-size: 12.5px; font-weight: 700; padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--dg-line-strong); background: #fff; cursor: pointer; color: var(--dg-ink-soft); transition: all .2s; }
.w16s-multi button[aria-pressed="true"] { background: var(--dg-teal-strong); border-color: var(--dg-teal-strong); color: #fff; }
.w16s-sw { display: flex; gap: 10px; align-items: flex-start; padding: 9px 11px; border-radius: 10px; border: 1px solid var(--dg-line); background: #fff; cursor: pointer; }
.w16s-sw input { margin-top: 3px; width: 17px; height: 17px; accent-color: var(--dg-orange); flex: none; }
.w16s-sw b { display: block; font-size: 13.5px; color: var(--dg-ink); }
.w16s-sw small { display: block; font-size: 12px; line-height: 1.55; color: var(--dg-ink-soft); }
.w16s-act { justify-content: center; }
.w16s-stage { min-width: 0; display: flex; flex-direction: column; background: #E9ECEF; }
.w16s-stage-bar { display: flex; align-items: center; gap: 6px; padding: 8px 14px; background: #fff; border-bottom: 1px solid var(--dg-line); font-family: var(--dg-font-mono); font-size: 11.5px; color: var(--dg-ink-faint); }
.w16s-stage-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--dg-line-strong); }
.w16s-stage-bar i:nth-child(3) { margin-right: 8px; }
.w16s-state { margin-left: auto; font-style: normal; padding: 2px 9px; border-radius: 99px; background: var(--dg-surface-3); color: var(--dg-ink-soft); }
.w16s-state.ok { background: var(--dg-ok-soft); color: var(--dg-ok); }
.w16s-canvas { padding: 16px; flex: 1; min-width: 0; overflow-x: auto; }
.w16s-canvas [data-seg] { transition: outline-color .2s, opacity .45s, transform .45s; outline: 2px solid transparent; outline-offset: 2px; }
.w16s-canvas [data-seg].hl { outline-color: var(--dg-orange); box-shadow: 0 0 0 5px rgba(232, 98, 42, .18); position: relative; z-index: 2; }
.w16s-canvas .pend { opacity: .08; transform: translateY(6px); }
.w16s-prompt { border-top: 1px solid var(--dg-line); background: var(--dg-deep); color: #E6FBFD; }
.w16s-pbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 16px; border-bottom: 1px solid rgba(94, 230, 242, .15); font-family: var(--dg-font-mono); font-size: 11.5px; color: rgba(255, 255, 255, .6); }
.w16s-pbar > div { display: flex; gap: 8px; }
.w16s-pbar button { appearance: none; cursor: pointer; font: inherit; font-family: var(--dg-font-mono); font-size: 11.5px; padding: 5px 11px; border-radius: 7px; border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; transition: all .2s; display: inline-flex; gap: 5px; align-items: center; }
.w16s-pbar button:hover { background: var(--dg-orange); border-color: var(--dg-orange); }
.w16s-pbar .w16s-run { background: var(--dg-orange); border-color: var(--dg-orange); font-weight: 700; }
.w16s-pbody { padding: 14px 18px; font-size: 14px; line-height: 2; white-space: pre-wrap; color: #E6FBFD; }
.w16s-pbody .seg { display: inline; padding: 2px 3px; border-radius: 5px; cursor: pointer; transition: background .2s; outline: none; }
.w16s-pbody .seg i { display: inline-block; font-style: normal; font-family: var(--dg-font-mono); font-size: 10px; font-weight: 700; width: 17px; height: 17px; line-height: 17px; text-align: center; border-radius: 50%; background: rgba(94, 230, 242, .25); color: var(--dg-teal-glow); margin-right: 5px; vertical-align: 1px; }
.w16s-pbody .seg:hover, .w16s-pbody .seg.on, .w16s-pbody .seg:focus { background: rgba(232, 98, 42, .34); }
.w16s-pbody .seg.on i { background: var(--dg-orange); color: #fff; }
.w16s-explain { padding: 0 18px 16px; }
.w16s-hint { font-family: var(--dg-font-mono); font-size: 12px; color: rgba(255, 255, 255, .55); display: inline-flex; gap: 6px; align-items: center; }
.w16s-hint i { color: var(--dg-orange); }
.w16-lad-top .w16s-hint { color: var(--dg-ink-faint); }
.w16s-ex { padding: 12px 14px; border-radius: 10px; background: rgba(255, 255, 255, .07); border-left: 3px solid var(--dg-orange); }
.w16s-ex b { display: block; font-size: 14px; color: #fff; margin-bottom: 4px; }
.w16s-ex p { margin: 0 0 4px; font-size: 13.5px; line-height: 1.7; color: rgba(255, 255, 255, .86); }
.w16s-ex em { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; letter-spacing: .06em; color: var(--dg-teal-glow); margin-right: 8px; }
.w16s-log { padding: 12px 18px 14px; background: #06161a; font-family: var(--dg-font-mono); font-size: 12.5px; line-height: 1.85; color: #A7F3D0; border-top: 1px dashed rgba(94, 230, 242, .25); }
.w16s-log[hidden] { display: none; }
.w16s-logh { color: var(--dg-teal-glow); margin-bottom: 4px; font-size: 11.5px; }
.w16s-log .ln.run { color: #FFD3BD; }
.w16s-log .ln.rep { color: #fff; margin-top: 6px; padding: 8px 10px; background: rgba(255, 255, 255, .06); border-radius: 8px; font-family: var(--dg-font-sans); font-size: 13.5px; line-height: 1.75; }
.w16s-log .ln.tip { color: rgba(255, 255, 255, .6); font-family: var(--dg-font-sans); font-size: 12.5px; }
.w16s-log .spin { display: inline-block; width: 10px; height: 10px; border: 2px solid var(--dg-orange); border-right-color: transparent; border-radius: 50%; animation: w16spin .7s linear infinite; vertical-align: -1px; }
@keyframes w16spin { to { transform: rotate(360deg); } }
.w16s-verify { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--dg-line); }
.w16s-verify > div { padding: 16px 18px; }
.w16s-verify > div:first-child { border-right: 1px solid var(--dg-line); }
.w16s-ckn { font-family: var(--dg-font-mono); color: var(--dg-orange-strong); margin-left: 6px; }
.w16s-ckn.ok { color: var(--dg-ok); }
.w16s-ck { display: flex; gap: 9px; align-items: flex-start; padding: 8px 10px; border-radius: 9px; font-size: 13.5px; line-height: 1.6; color: var(--dg-ink-soft); cursor: pointer; transition: background .2s; }
.w16s-ck:hover { background: var(--dg-surface-2); }
.w16s-ck input { margin-top: 4px; accent-color: var(--dg-ok); width: 16px; height: 16px; flex: none; }
.w16s-ck.on { color: var(--dg-ink); background: var(--dg-ok-soft); }
.w16s-fix { border: 1px solid var(--dg-line); border-radius: 10px; margin-bottom: 8px; background: #fff; overflow: hidden; }
.w16s-fix summary { cursor: pointer; padding: 9px 12px; font-size: 13.5px; font-weight: 700; color: var(--dg-ink); list-style: none; display: flex; gap: 8px; }
.w16s-fix summary::-webkit-details-marker { display: none; }
.w16s-fix summary::before { content: "＋"; color: var(--dg-orange); font-weight: 900; }
.w16s-fix[open] summary::before { content: "－"; }
.w16s-fixbody { padding: 0 12px 12px; display: grid; gap: 8px; }
.w16s-fixbody > div { font-size: 13px; line-height: 1.75; background: var(--dg-deep); color: #E6FBFD; padding: 10px 12px; border-radius: 8px; font-family: var(--dg-font-mono); white-space: pre-wrap; }
.w16s-fixbody button { justify-self: start; appearance: none; cursor: pointer; font: inherit; font-size: 12px; font-weight: 700; padding: 5px 11px; border-radius: 7px; border: 1px solid var(--dg-line-strong); background: #fff; color: var(--dg-ink); }
.w16s-fixbody button:hover { border-color: var(--dg-orange); color: var(--dg-orange-strong); }
.w16s-ev { padding: 16px 18px; border-top: 1px solid var(--dg-line); background: var(--dg-surface-2); }
.w16s-evrow { display: flex; gap: 12px; flex-wrap: wrap; }
.w16s-zoom { appearance: none; border: 1px solid var(--dg-line-strong); background: #fff; border-radius: 12px; padding: 6px; cursor: zoom-in; width: 190px; text-align: left; font: inherit; transition: transform .2s, box-shadow .2s; }
.w16s-zoom:hover { transform: translateY(-3px); box-shadow: var(--dg-shadow); }
.w16s-zoom img { width: 100%; height: 120px; object-fit: cover; object-position: top; border-radius: 8px; display: block; }
.w16s-zoom span { display: block; font-size: 12px; line-height: 1.5; color: var(--dg-ink-soft); padding: 6px 4px 2px; }
.w16s-after { padding: 14px 18px; font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); background: var(--dg-amber-soft); border-top: 1px solid var(--dg-line); }
.w16s-ov { position: fixed; inset: 0; z-index: 3000; background: rgba(4, 22, 26, .94); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 24px; gap: 10px; cursor: zoom-out; }
.w16s-ov.on { display: flex; }
.w16s-ov img { max-width: 94vw; max-height: 80vh; border-radius: 10px; background: #fff; }
.w16s-ov p { color: #fff; font-size: 14px; margin: 0; }
.w16s-ov button { position: absolute; top: 18px; right: 18px; width: 44px; height: 44px; border-radius: 50%; border: 2px solid #fff; background: var(--dg-orange); color: #fff; font-size: 18px; cursor: pointer; }
.ct { display: inline-block; font-family: var(--dg-font-mono); font-size: 11.5px; padding: 3px 8px; border-radius: 6px; font-weight: 600; }
.ct.ok { background: var(--dg-ok-soft); color: var(--dg-ok); }
.ct.no { background: var(--dg-orange-soft); color: var(--dg-bad); }

@media (max-width: 900px) {
  .w16s-why, .w16s-verify { grid-template-columns: 1fr; }
  .w16s-why > div, .w16s-verify > div:first-child { border-right: 0; border-bottom: 1px solid var(--dg-line); }
  .w16s-grid { grid-template-columns: minmax(0, 1fr); }
  .w16s-ctl { border-right: 0; border-bottom: 1px solid var(--dg-line); }
}

/* ---------- 情緒板預覽 ---------- */
.mb { display: grid; gap: 10px; }
.mb-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.mb-tile { border-radius: 12px; padding: 12px 14px; min-height: 104px; display: flex; flex-direction: column; justify-content: flex-end; position: relative; }
.mb-tile b { font-size: 16px; }
.mb-tile small { font-size: 11.5px; line-height: 1.5; opacity: .88; }
.mb-tag { position: absolute; top: 8px; right: 8px; font-family: var(--dg-font-mono); font-size: 10px; padding: 2px 7px; border-radius: 99px; background: rgba(255, 255, 255, .85); color: #0B2A30; }
.mb-pal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; background: #fff; padding: 10px; border-radius: 12px; }
.mb-pal > div { display: grid; gap: 2px; font-size: 11px; color: #475569; min-width: 0; }
.mb-pal i { display: block; height: 34px; border-radius: 8px; }
.mb-pal b { font-size: 11.5px; color: #0B2A30; }
.mb-pal span { font-family: var(--dg-font-mono); }
.mb-ct b { font-family: var(--dg-font-display); font-size: 22px; color: #0B2A30; }
.mb-type { border-radius: 12px; padding: 12px 16px; border: 1px solid #D3ECF0; }
.mb-type small { font-family: var(--dg-font-mono); font-size: 10.5px; opacity: .7; }
.mb-type p { margin: 2px 0 8px; font-size: 24px; line-height: 1.3; }
.mb-warn { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--dg-amber-soft); color: #6B4510; font-size: 13px; line-height: 1.65; }
@media (max-width: 560px) { .mb-pal { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 變數面板預覽 ---------- */
.vp { background: #fff; border-radius: 12px; border: 1px solid #D5D9DD; overflow: hidden; font-size: 13px; }
.vp-h { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; background: #F4F5F7; border-bottom: 1px solid #E3E5E8; font-size: 12px; flex-wrap: wrap; }
.vp-h span { font-family: var(--dg-font-mono); color: #777; font-size: 11px; }
.vp-t { width: 100%; border-collapse: collapse; }
.vp-t th { text-align: left; font-family: var(--dg-font-mono); font-size: 10.5px; color: #888; padding: 6px 10px; border-bottom: 1px solid #E3E5E8; font-weight: 500; }
.vp-t td { padding: 6px 10px; border-bottom: 1px solid #F0F1F3; font-size: 12.5px; }
.vp-t td:first-child { width: 36px; }
.vp-t i { display: block; width: 22px; height: 22px; border-radius: 6px; }
.vp-demo { display: flex; gap: 12px; align-items: center; padding: 10px 12px; background: #FAFAFB; flex-wrap: wrap; }
.vp-demo button { border: 0; border-radius: 10px; padding: 9px 18px; font-weight: 800; font-size: 14px; font-family: var(--dg-font-sans); }
.vp-demo span { font-size: 12.5px; color: #555; flex: 1; min-width: 160px; line-height: 1.55; }

/* ---------- 文字樣式預覽 ---------- */
.tp { background: #fff; border-radius: 12px; border: 1px solid #D5D9DD; overflow: hidden; }
.tp-h { display: flex; justify-content: space-between; gap: 8px; padding: 9px 12px; background: #F4F5F7; border-bottom: 1px solid #E3E5E8; font-size: 12px; flex-wrap: wrap; }
.tp-h span { font-family: var(--dg-font-mono); color: #777; font-size: 11px; }
.tp-r { padding: 8px 14px; border-bottom: 1px solid #F0F1F3; display: grid; gap: 2px; color: #0B2A30; }
.tp-r small { font-size: 10.5px; color: #888; }
.tp-r span { overflow: hidden; }
.tp-m { padding: 10px 14px; background: #FAFAFB; font-size: 12.5px; color: #555; line-height: 1.6; }

/* ---------- 元件預覽 ---------- */
.cp { display: grid; gap: 12px; }
.cp-g { display: grid; grid-template-columns: 112px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: stretch; background: #fff; padding: 10px; border-radius: 12px; }
.cp-hd { display: grid; gap: 1px; text-align: center; padding: 6px 4px; border-radius: 8px; background: #F4F5F7; align-content: start; transition: all .2s; }
.cp-hd b { font-family: var(--dg-font-mono); font-size: 11px; color: #0B2A30; font-weight: 700; }
.cp-hd span { font-size: 13px; font-weight: 800; color: var(--dg-orange-strong); }
.cp-hd small { font-size: 10.5px; line-height: 1.45; color: #64748B; }
.cp-hd.on { background: var(--dg-orange); }
.cp-hd.on b, .cp-hd.on span, .cp-hd.on small { color: #fff; }
.cp-rh { display: grid; gap: 2px; align-content: center; padding: 4px 6px; }
.cp-rh b { font-family: var(--dg-font-mono); font-size: 11px; color: #0B2A30; }
.cp-rh small { font-size: 10.5px; line-height: 1.5; color: #64748B; }
.cp-g .cell { appearance: none; font: inherit; cursor: pointer; display: grid; place-items: center; padding: 8px 4px; border: 2px solid transparent; border-radius: 10px; background: #FAFAFB; transition: all .2s; }
.cp-g .cell:hover { border-color: var(--dg-teal); }
.cp-g .cell.on { border-color: var(--dg-orange); background: var(--dg-orange-soft); box-shadow: 0 0 0 3px rgba(232, 98, 42, .15); }
.cp-g .cell .cb { pointer-events: none; }
.cp-live { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 14px; align-items: center; background: #fff; border: 1.5px dashed var(--dg-line-strong); border-radius: 12px; padding: 14px; }
.cp-live small { display: block; font-size: 11.5px; line-height: 1.6; color: #64748B; margin-bottom: 10px; }
.cp-live-row { display: flex; gap: 10px; flex-wrap: wrap; }
.cb.live { cursor: pointer; user-select: none; background: var(--dg-orange); }
.cp-now { font-size: 12.5px; color: #475569; line-height: 1.6; }
.cp-now b { font-size: 14px; color: #0B2A30; }
.cp-now em { font-style: normal; color: var(--dg-orange-strong); }
.cp-now .sp { margin: 4px 0 0; }
.cp-now .lk { margin: 4px 0 0; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-teal-strong); }
.cp-note { margin: 0; font-size: 12.5px; color: #64748B; line-height: 1.6; }
@media (max-width: 760px) { .cp-live { grid-template-columns: 1fr; } .cp-g { grid-template-columns: 78px repeat(4, minmax(0, 1fr)); gap: 3px; padding: 6px; } .cp-hd small, .cp-rh small { display: none; } .cb { font-size: 11px; } .cp-g .cb { padding: 0 5px !important; } }
.cp-i { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-b { background: #fff; border-radius: 10px; padding: 8px 12px; font-size: 12px; color: #0B2A30; }
.cp-m { background: #fff; padding: 10px 12px; border-radius: 12px; }
.cp-m small { font-family: var(--dg-font-mono); font-size: 10.5px; color: #777; }
.cp-s { display: flex; gap: 8px; align-items: center; border: 1px solid #CBD5E1; border-radius: 16px; padding: 5px; margin-top: 6px; }
.cp-s > span:first-child { flex: 1; font-size: 13px; color: #94A3B8; padding-left: 10px; }

/* ---------- 線框 → 精稿 預覽 ---------- */
.wf { --p: #0EA5B8; --a: #E8622A; --pl: #D3F1F5; --pd: #066B7A; --bg: #F3FAFB; --ink: #0B2A30; --ad: #B84418; --hf: "Noto Serif TC", serif; background: #F3F4F6; border-radius: 12px; padding: 10px; display: grid; gap: 8px; font-family: "Noto Sans TC", sans-serif; font-size: 12px; color: #6B7280; transition: all .4s; }
.wf em.no { font-style: normal; display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: #374151; color: #fff; font-size: 10px; margin-right: 4px; font-weight: 700; }
.wf-nav { display: flex; align-items: center; gap: 10px; background: #E5E7EB; padding: 8px 10px; border-radius: 8px; }
.wf-logo { margin-right: auto; font-size: 13px; color: #4B5563; }
.wf-btn { background: #D1D5DB; color: #4B5563; padding: 5px 12px; border-radius: 4px; font-weight: 700; display: inline-flex; align-items: center; transition: all .4s; }
.wf-hero { background: #E5E7EB; border-radius: 8px; padding: 14px; display: grid; gap: 6px; justify-items: start; transition: all .4s; }
.wf-hero h4 { margin: 0; font-size: 16px; color: #4B5563; font-family: inherit; }
.wf-hero p { margin: 0; font-size: 11.5px; }
.wf-search { display: flex; gap: 6px; align-items: center; background: #fff; padding: 4px; border-radius: 6px; width: 100%; max-width: 360px; }
.wf-search span:first-child { flex: 1; padding-left: 6px; color: #9CA3AF; }
.wf-body { display: grid; gap: 8px; }
.wf-map { height: 76px; background: #D1D5DB; border-radius: 8px; display: grid; place-items: center; position: relative; transition: all .4s; }
.wf-map .no { position: absolute; top: 6px; left: 6px; }
.wf-map i { font-style: normal; font-size: 18px; }
.wf-tags { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.wf-tags span { padding: 3px 12px; border-radius: 99px; background: #E5E7EB; color: #6B7280; transition: all .4s; }
.wf-tags span.on { background: #9CA3AF; color: #fff; }
.wf h5 { margin: 0; font-size: 13px; color: #4B5563; }
.wf-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wf-card { background: #fff; border-radius: 8px; padding: 6px; display: grid; gap: 3px; position: relative; }
.wf-card .img { height: 44px; background: #E5E7EB; border-radius: 5px; }
.wf-card .tag { position: absolute; top: 10px; left: 10px; font-size: 10px; background: #9CA3AF; color: #fff; padding: 1px 7px; border-radius: 99px; transition: all .4s; display: inline-flex; align-items: center; }
.wf-card b { font-size: 12px; color: #4B5563; }
.wf-card small { font-size: 10.5px; }
.wf-map-legend { font-size: 11.5px; color: var(--dg-ink-soft); margin-top: 8px; }
.wf-map-legend b { font-family: var(--dg-font-mono); color: var(--dg-ink); }
.wf[data-k="on"] .wf-btn { background: var(--a); color: #fff; border-radius: 12px; box-shadow: 0 6px 14px -8px var(--a); }
.wf[data-c="on"] { background: var(--bg); color: var(--ink); }
.wf[data-c="on"] .wf-nav { background: #fff; }
.wf[data-c="on"] .wf-hero { background: linear-gradient(135deg, var(--pl), var(--bg)); }
.wf[data-c="on"] .wf-map { background: color-mix(in srgb, var(--p) 15%, #fff); color: var(--pd); }
.wf[data-c="on"] .wf-tags span.on { background: var(--p); color: #fff; }
.wf[data-c="on"] .wf-tags span { background: #fff; border: 1px solid #D3ECF0; }
.wf[data-c="on"] .wf-card:nth-child(odd) .tag { background: var(--ad); }
.wf[data-c="on"] .wf-card:nth-child(even) .tag { background: var(--pd); }
.wf[data-c="on"] .wf-card .img { background: linear-gradient(140deg, var(--pl), var(--p)); }
.wf[data-t="on"] .wf-hero h4 { font-family: var(--hf); font-size: 24px; font-weight: 900; line-height: 1.2; color: var(--ink); }
.wf[data-t="on"] h5 { font-family: var(--hf); font-size: 17px; font-weight: 700; color: var(--ink); }
.wf[data-t="on"] .wf-card b { font-size: 14px; font-weight: 700; }
.wf[data-t="on"] .wf-hero p, .wf[data-t="on"] .wf-card small { color: #3D6169; font-size: 12.5px; }

/* ---------- 批次內容 ---------- */
.bt-g { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.bt-c { background: #fff; border-radius: 10px; padding: 7px; display: grid; gap: 3px; position: relative; font-size: 12px; min-width: 0; }
.bt-c .img { height: 46px; border-radius: 6px; background: linear-gradient(140deg, #D3F1F5, #0EA5B8); }
.bt-c .tag { position: absolute; top: 11px; left: 11px; font-size: 10px; color: #fff; padding: 1px 7px; border-radius: 99px; font-weight: 700; }
.t-eco { background: #066B7A; } .t-cul { background: #8A6A2E; } .t-food { background: #B84418; } .t-craft { background: #5B4B8A; }
.bt-c b { font-size: 13px; color: #0B2A30; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bt-c small { color: #64748B; font-size: 11px; }
.bt-c strong { font-family: var(--dg-font-display); font-size: 13px; color: #B84418; }
.bt-s { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
@media (max-width: 560px) { .bt-g { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 稽核 ---------- */
.au { display: grid; gap: 10px; }
.au-pg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.au-pg > div { background: #fff; border-radius: 10px; padding: 9px 10px; border: 2px solid; display: grid; gap: 2px; }
.au-pg > div.ok { border-color: #12805C; } .au-pg > div.no { border-color: #C2410C; }
.au-pg b { font-size: 13px; color: #0B2A30; } .au-pg span { font-size: 11.5px; font-family: var(--dg-font-mono); }
.au-pg .ok span { color: #12805C; } .au-pg .no span { color: #C2410C; }
.au-t { width: 100%; border-collapse: collapse; background: #fff; border-radius: 10px; overflow: hidden; font-size: 12.5px; }
.au-t th { text-align: left; padding: 7px 10px; background: #F4F5F7; font-family: var(--dg-font-mono); font-size: 10.5px; color: #777; font-weight: 500; }
.au-t td { padding: 7px 10px; border-top: 1px solid #F0F1F3; line-height: 1.5; vertical-align: top; }
.au-t tr.fixed td { color: #64748B; }
.au-t tr.fixed td:last-child { color: #12805C; }
.au-s { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .au-pg { grid-template-columns: repeat(2, 1fr); } }

/* ---------- 指令完整度階梯 ---------- */
.w16-lad { margin: 22px 0 8px; border: 1.5px solid var(--dg-line-strong); border-radius: 18px; background: var(--dg-surface); overflow: hidden; box-shadow: var(--dg-shadow); }
.w16-lad-head { padding: 14px 18px; background: var(--dg-deep); color: #fff; }
.w16-lad-head b { display: block; font-size: 17px; font-weight: 900; }
.w16-lad-head small { color: rgba(255, 255, 255, .72); font-size: 13px; }
#w16Ladder { padding: 16px 18px 18px; }
.w16-lad-top { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.w16-lad-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; }
@media (max-width: 860px) { .w16-lad-grid { grid-template-columns: 1fr; } }
#ladText { width: 100%; font: inherit; font-size: 14px; line-height: 1.8; padding: 10px 12px; border-radius: 10px; border: 1.5px solid var(--dg-line-strong); resize: vertical; background: #fff; color: var(--dg-ink); }
.w16-lad-cr { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.w16-lad-cr span { font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 99px; }
.w16-lad-cr .ok { background: var(--dg-ok-soft); color: var(--dg-ok); }
.w16-lad-cr .no { background: var(--dg-orange-soft); color: var(--dg-bad); }
.w16-lad-acts { display: flex; gap: 8px; flex-wrap: wrap; }
.w16-lad-res { background: var(--dg-surface-2); border-radius: 12px; padding: 14px; }
.w16-lad-score { display: flex; align-items: baseline; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; }
.w16-lad-score b { font-family: var(--dg-font-display); font-size: 40px; line-height: 1; color: var(--dg-ink); }
.w16-lad-score span { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-faint); }
.w16-lad-score em { font-style: normal; font-size: 13px; font-weight: 800; padding: 3px 10px; border-radius: 99px; margin-left: auto; }
.w16-lad-score em.no { background: var(--dg-orange-soft); color: var(--dg-bad); } .w16-lad-score em.mid { background: var(--dg-amber-soft); color: #8A5A10; } .w16-lad-score em.ok { background: var(--dg-ok-soft); color: var(--dg-ok); }
.w16-lad-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.w16-lad-swatches > div { display: grid; gap: 3px; justify-items: center; font-family: var(--dg-font-mono); font-size: 10px; color: var(--dg-ink-soft); }
.w16-lad-swatches i { display: block; width: 44px; height: 32px; border-radius: 8px; }
.w16-lad-notes { margin: 0; padding-left: 1.2em; font-size: 13px; line-height: 1.75; color: var(--dg-ink-soft); }

/* ---------- Lv.6 流程條 ---------- */
.w16-flow6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; }
.w16-flow6 a { text-decoration: none; border: 1.5px solid var(--dg-line-strong); border-radius: 12px; padding: 10px 12px; background: var(--dg-surface); display: grid; gap: 2px; transition: all .2s; }
.w16-flow6 a:hover { border-color: var(--dg-orange); transform: translateY(-2px); }
.w16-flow6 a span { font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-orange-strong); font-weight: 700; }
.w16-flow6 a b { font-size: 13.5px; color: var(--dg-ink); line-height: 1.4; }
.w16-flow6 a small { font-size: 11.5px; color: var(--dg-ink-faint); line-height: 1.5; }
@media (max-width: 900px) { .w16-flow6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- 名詞釋義 ---------- */
.w16s-gl { padding: 14px 18px 16px; border-top: 1px solid var(--dg-line); background: #FBFDFD; }
.w16s-glchips { display: flex; flex-wrap: wrap; gap: 7px; }
.w16s-glchips button { appearance: none; font: inherit; cursor: pointer; padding: 5px 12px; border-radius: 99px; border: 1.5px solid var(--dg-line-strong); background: #fff; font-size: 13px; font-weight: 700; color: var(--dg-ink); display: inline-flex; gap: 6px; align-items: baseline; transition: all .2s; }
.w16s-glchips button small { font-family: var(--dg-font-mono); font-size: 10px; font-weight: 500; color: var(--dg-ink-faint); }
.w16s-glchips button:hover { border-color: var(--dg-teal); }
.w16s-glchips button[aria-pressed="true"] { background: var(--dg-teal-strong); border-color: var(--dg-teal-strong); color: #fff; }
.w16s-glchips button[aria-pressed="true"] small { color: rgba(255, 255, 255, .75); }
.w16s-glx { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: var(--dg-teal-soft); border-left: 3px solid var(--dg-teal); font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); min-height: 48px; }
.w16s-glx b { font-size: 15px; color: var(--dg-ink); }
.w16s-glx b em { font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-teal-strong); font-weight: 500; margin-left: 4px; }
.w16s-glx p { margin: 3px 0 0; }
.w16s-glx .eg span { font-family: var(--dg-font-mono); font-size: 10.5px; background: var(--dg-teal-strong); color: #fff; padding: 1px 6px; border-radius: 4px; margin-right: 6px; }
.w16s-hint2 { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-faint); display: inline-flex; gap: 6px; align-items: center; }
.w16s-canvas .hl-t { outline: 2.5px solid var(--dg-teal) !important; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(14, 165, 184, .22); position: relative; z-index: 2; }
.w16s-canvas tr.hl-t { outline-offset: -2px; box-shadow: none; background: rgba(14, 165, 184, .12); }
.cp-now p { font-size: 12.5px !important; line-height: 1.6; margin: 4px 0 0; color: #475569; }
.cp-now .lk { font-size: 11px !important; }
.cp-rh b, .cp-hd b { overflow-wrap: anywhere; line-height: 1.35; }
@media (max-width: 760px) { .cp-rh b { font-size: 10px; } .cp-hd b { font-size: 9.5px; } .cp-hd span { font-size: 12px; } }

/* =========================================================
   web05–07 新工作台預覽（pp- 前綴）
   ========================================================= */
.pp-note { margin: 0; padding: 12px 18px; font-size: 13.5px; line-height: 1.8; background: var(--dg-surface-2); border-top: 1px solid var(--dg-line); color: var(--dg-ink-soft); }
.pp-carry { display: inline-block; font-style: normal; font-family: var(--dg-font-mono); font-size: 11px; padding: 2px 9px; border-radius: 99px; background: var(--dg-ok-soft); color: var(--dg-ok); margin-left: 6px; }
.pp-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 640px) { .pp-two { grid-template-columns: 1fr; } }
.pp-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.pp-chips em { font-style: normal; font-family: var(--dg-font-mono); font-size: 11.5px; padding: 3px 10px; border-radius: 99px; background: rgba(255, 255, 255, .16); }
.pp-tb { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pp-tb td { padding: 5px 8px; border-bottom: 1px solid var(--dg-line); }
.pp-tb td:last-child { text-align: right; width: 48px; }
.p0, .p1 { display: inline-block; font-family: var(--dg-font-mono); font-size: 10.5px; font-weight: 700; padding: 1px 7px; border-radius: 5px; font-style: normal; }
.p0 { background: var(--dg-teal-strong); color: #fff; }
.p1 { background: transparent; border: 1.5px solid var(--dg-teal-strong); color: var(--dg-teal-strong); }
.pp-tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.pp-tags li { font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 99px; }
.pp-tags li.p0 { font-family: inherit; font-size: 12.5px; }
.w16s-canvas h6 { margin: 0 0 6px; }

/* Lv.1 */
.pp-rfp { display: grid; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; }
.pp-rfp > div { border-radius: 10px; padding: 10px 12px; }
.pp-rfp-top { background: var(--dg-deep); color: #fff; display: grid; gap: 1px; }
.pp-rfp-top small { font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-teal-glow); }
.pp-rfp-top b { font-size: 18px; }
.pp-rfp-top span { font-size: 13px; opacity: .85; }
.pp-wt, .pp-rfp .pp-two > div, .pp-out { background: var(--dg-surface-2); }
.pp-rfp .pp-two { padding: 0; background: none; gap: 10px; }
.pp-rfp .pp-two > div { border-radius: 10px; padding: 10px 12px; }
.pp-bar { display: grid; grid-template-columns: 104px minmax(0, 1fr) 40px; gap: 8px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.pp-bar i { height: 10px; border-radius: 99px; background: var(--dg-teal); display: block; }
.pp-bar.a i { background: var(--dg-orange); }
.pp-bar.c i { background: var(--dg-ink-faint); }
.pp-bar b { text-align: right; font-family: var(--dg-font-mono); font-size: 12px; }
.pp-out ol { margin: 0; padding-left: 18px; font-size: 12.5px; line-height: 1.8; }
.pp-paste { border: 2px dashed var(--dg-line-strong); text-align: center; font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-ink-faint); padding: 14px !important; }

/* Lv.2 */
.pp-pers { display: grid; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; }
.pp-quote { background: var(--dg-deep); color: #fff; border-radius: 10px; padding: 10px 14px; font-size: 14px; }
.pp-pc { background: var(--dg-surface-2); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; font-size: 13px; }
.pp-pc .pp-av { width: 30px; height: 30px; border-radius: 50%; background: var(--dg-teal-strong); color: #fff; display: grid; place-items: center; font-weight: 900; }
.pp-pc small { color: var(--dg-ink-soft); }
.pp-pc p { margin: 2px 0; line-height: 1.7; }
.pp-pc em { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-teal-strong); font-weight: 700; margin-right: 6px; }
.pp-pain { display: inline-block; font-style: normal; font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 99px; margin: 2px 4px 2px 0; background: var(--dg-surface-3); color: var(--dg-ink-soft); }
.pp-pain.hot { background: var(--dg-bad-soft, #FDE8E4); color: var(--dg-bad); }
.pp-map2 { background: var(--dg-surface-2); border-radius: 10px; padding: 10px 12px; }
.pp-map2 > div { display: grid; grid-template-columns: auto 18px minmax(0, 1fr); gap: 6px; align-items: center; font-size: 12.5px; margin: 4px 0; }
.pp-swot { display: grid; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; }
.pp-sw4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.pp-sw4 > div { border-radius: 10px; padding: 9px 11px; font-size: 12.5px; line-height: 1.6; }
.pp-sw4 p { margin: 2px 0; }
.pp-sw4 .s { background: #E3F6EA; } .pp-sw4 .w { background: #FDE8E4; } .pp-sw4 .o { background: #E6F6F8; } .pp-sw4 .t { background: #FFF3DC; }
.pp-edge, .pp-spec { background: var(--dg-surface-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.pp-edge ol { margin: 0; padding-left: 18px; line-height: 1.8; }
.pp-bar2 { display: flex; height: 24px; border-radius: 8px; overflow: hidden; margin-top: 6px; }
.pp-bar2 i { display: grid; place-items: center; font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; }
.pp-bar2 .f { background: var(--dg-teal-strong); } .pp-bar2 .b { background: var(--dg-orange-strong); }

/* Lv.3 */
.pp-sm { display: grid; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; }
.pp-nav { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--dg-surface-2); }
.pp-nav b { font-size: 12px; font-family: var(--dg-font-mono); color: var(--dg-ink-faint); margin-right: 6px; }
.pp-nav span { font-size: 13px; font-weight: 700; padding: 5px 12px; border-radius: 8px; }
.pp-nav span.p0 { background: var(--dg-teal-strong); color: #fff; font-family: inherit; font-size: 13px; }
.pp-nav span.p1 { border: 1.5px dashed var(--dg-teal-strong); color: var(--dg-teal-strong); background: transparent; font-family: inherit; font-size: 13px; }
.pp-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12.5px; }
.pp-flow span { background: var(--dg-deep); color: #fff; border-radius: 8px; padding: 4px 10px; }
.pp-flow i { font-style: normal; color: var(--dg-orange); font-weight: 900; }
.pp-glob { border: 1.5px dashed var(--dg-orange); color: var(--dg-orange-strong); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; font-weight: 700; }
.pp-why { background: var(--dg-surface-2); border-radius: 10px; padding: 10px 12px; font-size: 12.5px; }
.pp-why ul { margin: 0; padding-left: 18px; line-height: 1.8; }

/* Lv.4 */
.pp-wf-wrap { display: grid; justify-items: center; gap: 6px; }
.pp-wf { background: #fff; border: 1px solid var(--dg-line-strong); border-radius: 8px; padding: 10px; display: grid; gap: 8px; align-content: start; width: 100%; max-width: 640px; position: relative; }
.pp-wf.m { max-width: 250px; }
.pp-wf-cap { margin: 0; font-size: 12px; color: var(--dg-ink-faint); font-family: var(--dg-font-mono); }
.wf { background: #E5E7EB; border-radius: 6px; padding: 8px; font-size: 11.5px; color: #6B7280; display: flex; gap: 6px; align-items: center; justify-content: center; }
.wf.nav { justify-content: space-between; background: #D1D5DB; } .wf.nav i { font-style: normal; font-weight: 700; } .wf.nav b { background: #9CA3AF; color: #fff; padding: 2px 8px; border-radius: 5px; font-size: 10.5px; }
.wf.hero { min-height: 90px; flex-direction: column; background: #D1D5DB; } .wf.hero em { font-style: normal; background: #fff; border-radius: 5px; padding: 2px 30px; }
.wf.map { min-height: 90px; background: #CBD5E1; }
.wf.tags { justify-content: flex-start; overflow: hidden; } .wf.tags i { font-style: normal; background: #fff; border: 1px solid #D1D5DB; border-radius: 99px; padding: 1px 9px; white-space: nowrap; } .wf.tags.sel i:first-child { background: #6B7280; color: #fff; }
.wf.ttl { justify-content: flex-start; font-weight: 700; background: #D1D5DB; }
.wf.grid { display: grid; gap: 6px; background: none; padding: 0; } .wf.grid i { background: #E5E7EB; min-height: 46px; border-radius: 6px; } .wf.grid.c1 { grid-template-columns: 1fr; } .wf.grid.c2 { grid-template-columns: repeat(2, 1fr); } .wf.grid.c3 { grid-template-columns: repeat(3, 1fr); }
.pp-wf.m .wf.grid.c3, .pp-wf.m .wf.grid.c2 { grid-template-columns: 1fr; }
.wf.foot { background: #9CA3AF; color: #fff; }
.wf.btn { background: #9CA3AF; color: #fff; font-weight: 700; } .wf.btn.full { width: 100%; }
.wf.tabs { justify-content: flex-start; gap: 14px; background: none; border-bottom: 2px solid #E5E7EB; border-radius: 0; } .wf.tabs i { font-style: normal; } .wf.tabs i.on { color: #374151; font-weight: 700; border-bottom: 2px solid #6B7280; }
.wf.para { flex-direction: column; align-items: stretch; background: none; padding: 2px 0; gap: 5px; } .wf.para u { height: 8px; background: #E5E7EB; border-radius: 4px; display: block; }
.wf.cta { background: #6B7280; color: #fff; font-weight: 700; } .wf.cta.fixr { position: sticky; margin-left: auto; width: 40%; } .wf.cta.fixb { position: sticky; bottom: 0; }
.wf.form { display: grid; background: none; padding: 0; gap: 5px; } .wf.form i { font-style: normal; background: #fff; border: 1px solid #D1D5DB; border-radius: 5px; padding: 6px 8px; text-align: left; } .wf.form i.tall { min-height: 40px; }

/* Lv.7 */
.pp-mk { background: #fff; border-radius: 12px; padding: 12px; display: grid; gap: 10px; }
.pp-mk-st { position: relative; min-height: 150px; border-radius: 10px; background: linear-gradient(135deg, #E6F6F8, #FDE8DA); display: grid; place-items: center; overflow: hidden; }
.pp-mk-t { transition: all var(--d) ease-out; position: relative; z-index: 1; cursor: pointer; }
.pp-mk-t .pin { display: block; width: 22px; height: 22px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--p); }
.pp-mk-t .tg { font-style: normal; background: var(--p); color: #fff; padding: 6px 16px; border-radius: 99px; font-weight: 700; display: inline-block; }
.pp-mk-t .sb { background: var(--p); color: #fff; padding: 10px 24px; border-radius: 10px; display: inline-block; }
.pp-mk-t .nv { display: flex; gap: 14px; background: #fff; border-radius: 10px; padding: 10px 16px; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); }
.pp-mk-t .cd { background: #fff; border-radius: 12px; padding: 10px; width: 150px; display: grid; gap: 4px; box-shadow: 0 6px 16px rgba(0, 0, 0, .1); } .pp-mk-t .cd u { height: 50px; background: #D3F1F5; border-radius: 8px; }
.pp-mk-pop { position: absolute; left: 50%; top: 50%; margin: -70px 0 0 20px; background: #fff; border-radius: 10px; padding: 8px 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, .15); display: grid; opacity: 0; transform: translateY(8px); transition: all var(--d) ease-out; font-size: 12.5px; z-index: 2; }
.pp-mk.go .pp-mk-pop { opacity: 1; transform: none; }
.pp-mk-t.rx-fade { opacity: 0; transform: translateY(12px); }
.pp-mk.go .pp-mk-t.rx-fade { opacity: 1; transform: none; }
.pp-mk.go .pp-mk-t.rx-color .pin, .pp-mk.go .pp-mk-t.rx-color .tg, .pp-mk.go .pp-mk-t.rx-color .sb { background: var(--a); }
.pp-mk.go .pp-mk-t.rx-color .cd { background: #FDE8DA; } .pp-mk.go .pp-mk-t.rx-color .nv { background: #FDE8DA; }
.pp-mk.go .pp-mk-t.rx-scale { transform: scale(1.12); filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .25)); }
.pp-mk-bar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; color: var(--dg-ink-soft); }
.pp-mk-note { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--dg-ok); } .pp-mk-note:not(:empty) { line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .pp-mk-t, .pp-mk-pop { transition: none; } }

/* Lv.8 */
.pp-a11y { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; background: #fff; border-radius: 12px; padding: 12px; align-items: start; }
@media (max-width: 760px) { .pp-a11y { grid-template-columns: 1fr; } }
.pp-bpf { border: 1px solid var(--dg-line-strong); border-radius: 10px; padding: 8px; display: grid; gap: 8px; margin: 0 auto; width: 100%; background: var(--dg-surface-2); }
.pp-bpf.bp375 { max-width: 210px; } .pp-bpf.bp768 { max-width: 330px; } .pp-bpf.bp1440 { max-width: 100%; }
.pp-nav2 { display: flex; gap: 10px; align-items: center; justify-content: space-between; font-size: 12px; background: #fff; border-radius: 8px; padding: 6px 10px; }
.pp-nav2 .bg { font-size: 14px; padding: 2px 6px; } .pp-nav2 .bg.big { padding: 8px 12px; background: var(--dg-teal-soft, #E6F6F8); border-radius: 8px; font-weight: 900; }
.pp-cta1 button { width: 100%; border: 0; border-radius: 8px; padding: 9px; font-weight: 700; font: inherit; }
.pp-h1 { font-weight: 900; font-size: 14px; } .pp-h1 em { color: var(--dg-bad); font-size: 11px; font-style: normal; }
.pp-grid1, .pp-grid2, .pp-grid3 { display: grid; gap: 6px; } .pp-grid1 { grid-template-columns: 1fr; } .pp-grid2 { grid-template-columns: 1fr 1fr; } .pp-grid3 { grid-template-columns: repeat(3, 1fr); }
.pp-grid1 i, .pp-grid2 i, .pp-grid3 i { background: #D3F1F5; min-height: 30px; border-radius: 6px; }
.pp-cr { display: grid; gap: 8px; }
.pp-crb { display: flex; gap: 12px; align-items: center; background: var(--dg-surface-2); border-radius: 10px; padding: 10px 12px; }
.pp-crb button { border: 0; border-radius: 8px; padding: 10px 18px; font: inherit; font-weight: 700; } .pp-crb button.fo { outline: 3px solid var(--dg-orange); outline-offset: 2px; }
.pp-crb b { white-space: nowrap; font-family: var(--dg-font-mono); font-size: 20px; } .pp-crb b.ok { color: var(--dg-ok); } .pp-crb b.bad { color: var(--dg-bad); }
.pp-crb small { display: block; font-size: 12px; color: var(--dg-ink-soft); }
.pp-ck { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 12.5px; } .pp-ck li { padding: 4px 9px; border-radius: 7px; background: #FDE8E4; color: var(--dg-bad); } .pp-ck li.on { background: var(--dg-ok-soft); color: var(--dg-ok); }
.pp-strat { margin: 0; font-size: 12.5px; color: var(--dg-ink-soft); line-height: 1.7; }

/* Lv.10 */
.pp-co { background: #fff; border-radius: 10px; padding: 14px; display: grid; gap: 10px; margin: 0 auto; box-shadow: 0 4px 14px rgba(0, 0, 0, .08); }
.pp-co.a4 { max-width: 360px; } .pp-co.\31 69 { max-width: 100%; }
.co-top { background: var(--p); color: #fff; border-radius: 10px; padding: 12px 14px; display: grid; gap: 2px; } .co-top i { font-style: normal; font-size: 11px; border: 1px dashed #fff; width: 44px; text-align: center; border-radius: 6px; } .co-top b { font-size: 17px; } .co-top small { font-size: 12px; opacity: .9; }
.co-kpi { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .co-kpi div { background: var(--dg-surface-2); border-radius: 8px; text-align: center; padding: 8px 4px; } .co-kpi b { display: block; font-size: 20px; color: var(--p); font-family: var(--dg-font-mono); } .co-kpi small { font-size: 11px; color: var(--dg-ink-soft); }
.co-cases { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 8px; } .co-cases div { background: var(--dg-surface-2); border-radius: 8px; padding: 6px; display: grid; gap: 3px; font-size: 11.5px; } .co-cases u { height: 40px; background: #D3F1F5; border-radius: 6px; display: block; } .co-cases em { font-style: normal; font-size: 10.5px; color: var(--dg-ink-faint); } .co-cases strong { color: var(--a); font-size: 12.5px; }
.pp-gt { display: grid; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; }
.gt-r { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; margin: 4px 0; } .gt-r > div { background: var(--dg-surface-2); border-radius: 6px; height: 22px; position: relative; }
.gt-r i { display: grid; place-items: center; height: 22px; border-radius: 6px; color: #fff; font-style: normal; font-size: 11px; font-weight: 700; white-space: nowrap; overflow: hidden; } .gt-r .c0 { background: #5B4B8A; } .gt-r .c1 { background: var(--dg-teal-strong); } .gt-r .c2 { background: var(--dg-orange-strong); } .gt-r .c3 { background: #8A6A2E; } .gt-r .c4 { background: var(--dg-ok); }
.gt-ms { position: relative; height: 22px; font-size: 11px; color: var(--dg-ink-soft); margin-left: 104px; } .gt-ms span { position: absolute; white-space: nowrap; transform: translateX(-30%); }
.gt-org { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; } .gt-org div { background: var(--dg-surface-2); border-radius: 10px; padding: 8px 10px; font-size: 12px; } .gt-org div.pm { background: var(--dg-deep); color: #fff; grid-column: 1 / -1; } .gt-org small { display: block; opacity: .8; }
.pp-sl { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; background: #fff; border-radius: 12px; padding: 12px; }
.pp-sl > div { aspect-ratio: 16 / 9; border-radius: 8px; padding: 6px 8px; display: grid; align-content: space-between; font-size: 12px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface-2); }
.pp-sl .o { border-color: var(--dg-teal-strong); } .pp-sl .m { border-color: var(--dg-orange); } .pp-sl .e { border-color: #5B4B8A; }
.pp-sl b { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-ink-faint); } .pp-sl span { font-weight: 700; } .pp-sl small { font-size: 10.5px; color: var(--dg-ink-faint); }
.pp-sl-cap { margin: 6px 4px 0; font-size: 12px; color: var(--dg-ink-faint); font-family: var(--dg-font-mono); }

/* 指令完整度階梯：完整版色彩選擇 */
.w16-lad-pick { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px 10px; align-items: end; margin: 0 16px 12px; padding: 12px 14px; border-radius: 12px; background: var(--dg-orange-soft, #FDE8DA); border: 1.5px dashed var(--dg-orange); }
.w16-lad-pick[hidden] { display: none; }
.w16-lad-pick > b { grid-column: 1 / -1; font-size: 14px; }
.w16-lad-pick > b small { display: block; font-weight: 400; font-size: 12px; color: var(--dg-ink-soft); }
.w16-lad-pick label { display: grid; gap: 3px; font-size: 12px; }
.w16-lad-pick label span { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-ink-soft); }
.w16-lad-pick input[type="color"] { width: 100%; height: 34px; border: 1px solid var(--dg-line-strong); border-radius: 8px; padding: 0; background: none; cursor: pointer; }
.w16-lad-pick input[type="text"] { font: inherit; font-size: 13px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--dg-line-strong); width: 100%; min-width: 0; background: #fff; }
.w16-lad-pick output { font-family: var(--dg-font-mono); font-size: 11.5px; }
.w16-lad-cr2 { grid-column: 1 / -1; margin: 0; font-size: 12.5px; color: var(--dg-ink-soft); }
.w16-lad-cr2 b { font-family: var(--dg-font-mono); } .w16-lad-cr2 b.ok { color: var(--dg-ok); } .w16-lad-cr2 b.no { color: var(--dg-bad); }
@media (max-width: 760px) { .w16-lad-pick { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 按鈕元件：文字水平＋垂直置中 */
.cp .cb { display: inline-flex; align-items: center; justify-content: center; text-align: center; line-height: 1.3; box-sizing: border-box; white-space: nowrap; vertical-align: middle; }

.cp-g .cb { white-space: normal; width: 100%; max-width: 100%; padding-left: 6px !important; padding-right: 6px !important; font-size: 13px; }

/* 指令手動編輯 */
.w16s-pedit { padding: 12px 18px 16px; }
.w16s-pedit[hidden], .w16s-pbody[hidden], .w16s-explain[hidden] { display: none; }
.w16s-pnote { margin: 0 0 8px; font-size: 12.5px; line-height: 1.7; color: #FFD9C2; }
.w16s-pedit textarea { width: 100%; min-height: 160px; resize: vertical; font: inherit; font-size: 14px; line-height: 1.9; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--dg-orange); background: rgba(255, 255, 255, .06); color: #E6FBFD; }
.w16s-pedit textarea:focus { outline: 2px solid var(--dg-orange); outline-offset: 2px; }
.w16s-pbar .w16s-edit[aria-pressed="true"] { background: var(--dg-orange); border-color: var(--dg-orange); }

/* 情緒板：分頁編輯色塊＋預覽固定在右側 */
.w16s-ctl [hidden] { display: none !important; }
#sMood .w16s-grid { align-items: start; }
#sMood .w16s-stage { position: sticky; top: calc(var(--dg-header-h, 70px) + 84px); }
#sMood .w16s-ctl { gap: 8px; }
#sMood .w16s-ctl > .w16s-row:first-of-type .dg-seg button { padding: 7px 4px; font-size: 12px; }
#sMood .mb-tile { cursor: pointer; transition: box-shadow .2s, transform .2s; }
#sMood .mb-tile.sel { box-shadow: 0 0 0 3px #fff, 0 0 0 6px var(--dg-orange); transform: translateY(-2px); }
@media (max-width: 860px) { #sMood .w16s-stage { position: static; } }
#sMood .w16s-ctl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
#sMood .w16s-ctl > * { grid-column: 1 / -1; }
#sMood .w16s-ctl > h6 { grid-column: 1 / -1; }
#sMood .w16s-ctl { grid-auto-flow: row dense; }
#sMood .w16s-ctl > .w16s-row:has(input[type="color"]), #sMood .w16s-ctl > .w16s-row:has(input[type="range"]), #sMood .w16s-ctl > .w16s-act { grid-column: auto; }
#sMood .w16s-ctl > .w16s-row:has(input[data-i="17"]) { grid-column: 1 / -1; }
#sMood .w16s-ctl > .w16s-act { font-size: 12px; padding-left: 6px; padding-right: 6px; }

/* 規格速查：動態色彩 Token 表 */
.w16-sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0, 0, 0, .12); vertical-align: -3px; margin-right: 6px; }
.w16-spec-src { font-size: 13px; color: var(--dg-ink-soft); margin: 0 0 8px; }
#w16SpecTokens b.ok { color: var(--dg-ok); } #w16SpecTokens b.mid { color: #B7791F; } #w16SpecTokens b.no { color: var(--dg-bad); }

/* Lv.7 Figma Prototype 測試機（每個按鈕都可點；⚡ 為你設定的互動） */
.pp-pt { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 14px; background: #fff; border-radius: 12px; padding: 14px; }
.pt-phone { position: relative; width: 230px; height: 420px; border-radius: 28px; border: 8px solid #1F2933; background: #F3FAFB; overflow: hidden; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, .35); }
.pt-phone button { font: inherit; cursor: pointer; }
.pt-scr { position: absolute; inset: 0; display: flex; flex-direction: column; background: #F3FAFB; transition: opacity var(--d) var(--e), transform var(--d) var(--e); }
.pt-nav { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; background: #fff; padding: 8px 10px; position: relative; z-index: 2; box-shadow: 0 1px 0 rgba(0, 0, 0, .06); }
.pt-nav button { border: 0; background: none; font-weight: 700; color: var(--p); padding: 2px 6px; border-radius: 6px; }
.pt-nav button:hover { background: #E6F6F8; }
.pt-burger { font-size: 15px; min-width: 32px; min-height: 28px; }
.pt-view { flex: 1; overflow: hidden; position: relative; }
.pt-scroll { display: flex; flex-direction: column; gap: 8px; padding: 8px 8px 64px; transition: transform var(--d) var(--e); }
.pt-hero { border-radius: 10px; background: var(--p); color: #fff; padding: 14px 10px; display: grid; gap: 2px; transition: transform var(--d) var(--e), padding var(--d) var(--e); transform-origin: top center; }
.pt-hero b { font-size: 13px; } .pt-hero small { font-size: 10px; opacity: .88; }
.pt-hero.big { margin: 8px 8px 0; padding: 30px 10px; }
.pt-sec { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; } .pt-sec i { display: block; height: 30px; border-radius: 8px; background: #D3ECF0; }
.pt-b .pt-sec { margin: 8px; }
.pt-feat { display: grid; gap: 6px; } .pt-feat > b { font-size: 11.5px; }
.pt-card { display: flex; gap: 8px; align-items: center; text-align: left; border: 1px solid #D3ECF0; background: #fff; border-radius: 10px; padding: 6px; font-size: 11px; transition: border-color .15s, transform .15s; }
.pt-card:hover { border-color: var(--p); transform: translateY(-1px); }
.pt-card u { width: 38px; height: 30px; border-radius: 6px; background: #D3F1F5; flex: none; }
.pt-card em { display: block; font-style: normal; color: var(--a); font-weight: 700; }
.pt-top { justify-self: center; border: 1px dashed #9FB7BC; background: #fff; border-radius: 99px; font-size: 10.5px; padding: 3px 10px; }
.pt-info { display: flex; gap: 6px; margin: 8px; } .pt-info span { font-size: 10px; background: #fff; border: 1px solid #D3ECF0; border-radius: 99px; padding: 2px 8px; }
.pt-book { margin: auto 8px 12px; border: 0; border-radius: 12px; background: var(--a); color: #fff; font-weight: 700; font-size: 12.5px; min-height: 40px; }
.pt-hot { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); border: 0; border-radius: 12px; background: var(--a); color: #fff; font-size: 12.5px; font-weight: 700; padding: 10px 16px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; z-index: 3; white-space: nowrap; box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0D99FF; transition: background var(--d) var(--e), transform var(--d) var(--e), box-shadow var(--d) var(--e); touch-action: none; overflow: hidden; }
.pt-hot i { font-style: normal; }
.pt-timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: #fff; }
.tr-delay.arm .pt-timer { animation: ptTimer .8s linear forwards; }
@keyframes ptTimer { to { width: 100%; } }
.pt-b { opacity: 0; pointer-events: none; }
.pt-ov, .pt-menu { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 5; transition: opacity var(--d) var(--e); }
.pt-ov { display: grid; place-items: center; background: rgba(2, 20, 26, .45); }
.pt-ov > div { width: 80%; background: #fff; border-radius: 14px; padding: 16px 12px; display: grid; gap: 6px; text-align: center; font-size: 11.5px; transition: transform var(--d) var(--e); }
.pt-ov b { color: var(--dg-ok); font-size: 14px; }
.pt-close { justify-self: center; border: 1.5px solid var(--p); background: #fff; color: var(--p); border-radius: 10px; padding: 6px 18px; font-weight: 700; min-height: 32px; }
.pt-menu { background: rgba(2, 20, 26, .35); transition: opacity .25s ease-out; }
.pt-menu > div { position: absolute; right: 0; top: 0; bottom: 0; width: 68%; background: #fff; padding: 12px; display: grid; gap: 6px; align-content: start; transform: translateX(100%); transition: transform .25s ease-out; }
.pt-menu > div button { border: 0; background: #F3FAFB; border-radius: 8px; padding: 9px 10px; text-align: left; font-size: 12px; font-weight: 700; }
.pt-menu > div button:hover { background: #E6F6F8; } .pt-menu .pt-mclose { justify-self: end; background: none !important; font-size: 14px; padding: 2px 8px !important; }
/* 狀態 */
.scr-b .pt-b { opacity: 1; pointer-events: auto; transform: none; }
.scr-b .pt-a { pointer-events: none; }
.an-dissolve.scr-b .pt-a, .an-smart.scr-b .pt-a, .an-instant.scr-b .pt-a { opacity: 0; }
.an-move .pt-b { opacity: 1; transform: translateX(100%); }
.an-move.scr-b .pt-a { transform: translateX(-30%); }
.an-move.scr-b .pt-b { transform: none; }
.an-smart .pt-b .pt-hero { transform: scale(.55) translateY(-30px); }
.an-smart.scr-b .pt-b .pt-hero { transform: none; }
.ov-on .pt-ov { opacity: 1; pointer-events: auto; }
.an-move .pt-ov > div { transform: translateY(120%); } .an-smart .pt-ov > div { transform: scale(.8); } .ov-on .pt-ov > div { transform: none; }
.an-move .pt-ov { background: rgba(2, 20, 26, .45); }
.menu-on .pt-menu { opacity: 1; pointer-events: auto; } .menu-on .pt-menu > div { transform: none; }
.chg-on .pt-hot { background: var(--p); transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 3px #fff, 0 0 0 5px #0D99FF, 0 8px 16px rgba(0, 0, 0, .25); }
.tr-hover.ac-overlay .pt-ov { pointer-events: none; }
.an-instant .pt-scr, .an-instant .pt-ov, .an-instant .pt-ov > div, .an-instant .pt-hot, .an-instant .pt-scroll, .an-instant .pt-hero { transition: none; }
/* 右側說明 */
.pt-side { width: 100%; max-width: 340px; display: grid; gap: 8px; justify-items: center; text-align: center; font-size: 13px; }
.pt-side p { margin: 0; }
.pt-noodle { width: 100%; display: flex; align-items: center; gap: 8px; font-family: var(--dg-font-mono); font-size: 12px; font-weight: 700; }
.pt-noodle span { padding: 4px 10px; border-radius: 8px; background: #E8F0FE; color: #0D5BD7; white-space: nowrap; }
.pt-noodle i { flex: 1; height: 2px; background: #0D99FF; position: relative; min-width: 30px; } .pt-noodle i::after { content: ""; position: absolute; right: -2px; top: -4px; border: 5px solid transparent; border-left-color: #0D99FF; }
.pt-tip { font-size: 12.5px; color: var(--dg-ink-soft); line-height: 1.7; }
.pt-log { width: 100%; font-size: 12.5px; line-height: 1.6; padding: 8px 10px; border-radius: 10px; background: var(--dg-surface-2); border: 1px solid var(--dg-line); min-height: 40px; }
.pt-log.flash { animation: ptFlash .6s ease-out; } @keyframes ptFlash { from { background: #FFF3DC; } }
@media (prefers-reduced-motion: reduce) { .pp-pt * { transition: none !important; animation: none !important; } }