/* =========================================================
   web11：Claude × Figma 逐步指令（接在 unit-digital.css、proposal-studio.css 之後）
   ========================================================= */
.w11-bar { position: sticky; top: calc(var(--dg-header-h) + 12px); z-index: 30; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px 14px; align-items: center; padding: 12px 14px; border-radius: 14px; background: var(--dg-deep); color: #fff; box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .55); margin: 6px 0 22px; }
.w11-bar label { font-family: var(--dg-font-mono); font-size: 12px; color: var(--dg-teal-glow); white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.w11-bar input { width: 100%; font: inherit; font-size: 15px; padding: 9px 12px; border-radius: 10px; border: 1px solid rgba(94, 230, 242, .35); background: rgba(255, 255, 255, .06); color: #fff; }
.w11-bar input::placeholder { color: rgba(255, 255, 255, .45); }
.w11-bar .acts { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) { .w11-bar { grid-template-columns: 1fr; position: static; } }

/* 路線總覽 */
.w11-route { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 14px 0 6px; position: relative; }
.w11-route > div { padding: 14px 14px 12px; border-radius: 14px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); display: grid; gap: 4px; align-content: start; position: relative; }
.w11-route > div:not(:last-child)::after { content: "→"; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 50%; background: var(--dg-deep); color: #fff; display: grid; place-items: center; font-size: 11px; z-index: 2; }
.w11-route .n { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-orange-strong); font-weight: 700; }
.w11-route b { font-size: 15px; color: var(--dg-ink); line-height: 1.4; }
.w11-route small { font-size: 12.5px; line-height: 1.6; color: var(--dg-ink-soft); }
.w11-route .who { font-family: var(--dg-font-mono); font-size: 10.5px; padding: 1px 7px; border-radius: 99px; justify-self: start; background: var(--dg-teal-soft); color: var(--dg-teal-strong); }
.w11-route .who.ai { background: var(--dg-orange-soft); color: var(--dg-orange-strong); }
@media (max-width: 980px) { .w11-route { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w11-route > div::after { display: none; } }

/* 路徑選擇卡 */
.w11-paths { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .w11-paths { grid-template-columns: 1fr; } }
.w11-path { padding: 16px 18px; border-radius: 16px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); display: grid; gap: 6px; }
.w11-path.rec { border-color: var(--dg-orange); background: var(--dg-orange-soft); }
.w11-path h4 { margin: 0; font-size: 17px; font-weight: 900; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.w11-path h4 em { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; background: var(--dg-orange); color: #fff; padding: 2px 8px; border-radius: 99px; }
.w11-path ul { margin: 0; padding-left: 1.2em; font-size: 13.5px; line-height: 1.8; color: var(--dg-ink-soft); }

/* Figma 檔案導覽 */
.w11-figmap { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 1100px) { .w11-figmap { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .w11-figmap { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w11-fm { border: 1.5px solid var(--dg-line); border-radius: 14px; background: var(--dg-surface); overflow: hidden; display: flex; flex-direction: column; transition: all .2s; }
.w11-fm:hover { border-color: var(--dg-orange); transform: translateY(-3px); box-shadow: var(--dg-shadow); }
.w11-fm button.th { appearance: none; border: 0; padding: 0; cursor: zoom-in; background: #E9ECEF; display: block; }
.w11-fm img { width: 100%; height: 150px; object-fit: cover; object-position: top; display: block; }
.w11-fm .meta { padding: 10px 12px 12px; display: grid; gap: 3px; font-size: 12.5px; color: var(--dg-ink-soft); line-height: 1.55; flex: 1; }
.w11-fm .meta b { font-size: 14px; color: var(--dg-ink); }
.w11-fm .meta code { font-size: 10.5px; word-break: break-all; color: var(--dg-ink-faint); }
.w11-fm .meta .step { font-family: var(--dg-font-mono); font-size: 10.5px; color: var(--dg-orange-strong); font-weight: 700; }
.w11-fm .acts { display: flex; gap: 6px; padding: 0 12px 12px; flex-wrap: wrap; }
.w11-fm .acts a { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 8px; border: 1px solid var(--dg-line-strong); background: #fff; color: var(--dg-ink); text-decoration: none; }
.w11-fm .acts a:hover { border-color: var(--dg-orange); color: var(--dg-orange-strong); }

/* 好指令公式 */
.w11-formula { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 900px) { .w11-formula { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w11-formula > div { padding: 12px 14px; border-radius: 12px; background: var(--dg-surface); border: 1px solid var(--dg-line); display: grid; gap: 3px; align-content: start; }
.w11-formula b { font-size: 15px; color: var(--dg-ink); }
.w11-formula b i { font-style: normal; font-family: var(--dg-font-mono); font-size: 10.5px; color: #fff; background: var(--dg-teal-strong); border-radius: 5px; padding: 1px 6px; margin-right: 6px; }
.w11-formula small { font-size: 12.5px; line-height: 1.65; color: var(--dg-ink-soft); }
.w11-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 760px) { .w11-vs { grid-template-columns: 1fr; } }
.w11-vs > div { border-radius: 14px; padding: 14px 16px; font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); }
.w11-vs .bad { background: var(--dg-orange-soft); border: 1px solid #F5C9AE; }
.w11-vs .good { background: var(--dg-ok-soft); border: 1px solid #B7E3D0; }
.w11-vs b { display: block; font-size: 14.5px; margin-bottom: 4px; color: var(--dg-ink); }
.w11-vs code { display: block; white-space: pre-wrap; font-size: 12.5px; background: rgba(255, 255, 255, .7); border-radius: 8px; padding: 8px 10px; margin: 6px 0; color: var(--dg-ink); }

/* 除錯診所 */
.w11-clinic { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 14px; align-items: start; }
@media (max-width: 860px) { .w11-clinic { grid-template-columns: 1fr; } }
.w11-sym { display: grid; gap: 6px; }
.w11-sym button { appearance: none; text-align: left; font: inherit; cursor: pointer; padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--dg-line); background: var(--dg-surface); display: flex; gap: 10px; align-items: center; font-size: 14px; font-weight: 700; color: var(--dg-ink); transition: all .2s; }
.w11-sym button i { font-style: normal; font-size: 18px; }
.w11-sym button[aria-pressed="true"] { border-color: var(--dg-orange); background: var(--dg-orange-soft); }
.w11-diag { border-radius: 16px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); padding: 16px 18px; display: grid; gap: 10px; position: sticky; top: calc(var(--dg-header-h) + 20px); }
.w11-diag h5 { margin: 0; font-size: 17px; font-weight: 900; }
.w11-diag .why, .w11-diag .how { font-size: 13.5px; line-height: 1.75; color: var(--dg-ink-soft); }
.w11-diag .why b, .w11-diag .how b { display: block; font-family: var(--dg-font-mono); font-size: 10.5px; letter-spacing: .08em; color: var(--dg-teal-strong); }
.w11-diag pre { margin: 0; white-space: pre-wrap; font-family: var(--dg-font-mono); font-size: 12.5px; line-height: 1.8; background: var(--dg-deep); color: #E6FBFD; border-radius: 10px; padding: 12px 14px; }
.w11-diag .acts { display: flex; gap: 8px; }

/* 發佈三路徑 */
.w11-pub { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
@media (max-width: 900px) { .w11-pub { grid-template-columns: 1fr; } }
.w11-pub > div { border-radius: 16px; border: 1.5px solid var(--dg-line-strong); background: var(--dg-surface); padding: 16px 18px; display: grid; gap: 6px; align-content: start; }
.w11-pub h4 { margin: 0; font-size: 16px; font-weight: 900; }
.w11-pub .tag { font-family: var(--dg-font-mono); font-size: 10.5px; padding: 2px 8px; border-radius: 99px; justify-self: start; background: var(--dg-teal-soft); color: var(--dg-teal-strong); }
.w11-pub ol { margin: 0; padding-left: 1.3em; font-size: 13.5px; line-height: 1.8; color: var(--dg-ink-soft); }
.w11-pub .note { font-size: 12.5px; color: var(--dg-ink-faint); line-height: 1.6; }

/* ---------- 迷你頁面預覽（STEP 預覽共用） ---------- */
.mp { --p: #0EA5B8; --a: #E8622A; --pl: #D3F1F5; --pd: #066B7A; --ad: #B84418; --bg: #F3FAFB; --ink: #0B2A30; --hf: 'Noto Serif TC', serif; background: var(--bg); color: var(--ink); border: 1px solid #cfe3e6; border-radius: 12px; overflow: hidden; font: 12px/1.55 'Noto Sans TC', sans-serif; }
.mp * { box-sizing: border-box; }
.mp.tall { max-height: 520px; overflow: auto; }
.mp-nav { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border-bottom: 1px solid #D3ECF0; font-weight: 700; }
.mp-nav b { margin-right: auto; color: var(--pd); font-family: var(--hf); }
.mp-burger { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: var(--pl); color: var(--pd); font-size: 15px; }
.mp-btn { background: var(--a); color: #fff; border-radius: 12px; padding: 5px 12px; font-weight: 800; font-style: normal; display: inline-block; }
.mp-btn.sec { background: #fff; color: var(--pd); border: 2px solid var(--pd); }
.mp-hero { padding: 16px 14px; background: linear-gradient(135deg, var(--pl), var(--bg)); }
.mp-hero h4 { margin: 0 0 4px; font: 900 22px/1.2 var(--hf); color: var(--ink); }
.mp-hero p { margin: 0; color: #3D6169; }
.mp-search { display: flex; gap: 6px; align-items: center; background: #fff; margin: 10px 14px; padding: 4px; border-radius: 12px; border: 1px solid #D3ECF0; max-width: 460px; }
.mp-search span { flex: 1; padding-left: 8px; color: #94A3B8; }
.mp-map { position: relative; height: 110px; margin: 8px 14px; background: color-mix(in srgb, var(--p) 14%, #fff); border-radius: 12px; overflow: hidden; }
.mp-map.big { height: 230px; margin: 8px 0 0; border-radius: 10px; }
.mp-map small { position: absolute; left: 8px; bottom: 6px; font-size: 10.5px; color: var(--pd); background: rgba(255, 255, 255, .8); padding: 1px 6px; border-radius: 4px; }
.mp-map .pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .3); transform: translate(-50%, -50%); cursor: pointer; transition: transform .2s; }
.mp-map .pin:hover { transform: translate(-50%, -50%) scale(1.4); }
.mp-map .popup { position: absolute; background: #fff; border-radius: 10px; padding: 8px 10px; box-shadow: 0 8px 20px -8px rgba(0, 0, 0, .35); display: grid; gap: 2px; min-width: 150px; z-index: 3; animation: mpIn .2s; }
.mp-map .popup[hidden] { display: none; }
@keyframes mpIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.mp-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 14px; }
.mp-chips span { padding: 3px 12px; border-radius: 99px; background: #fff; border: 1px solid #D3ECF0; font-weight: 700; }
.mp-chips span.on { background: var(--p); border-color: var(--p); color: #fff; }
.mp-cards { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 8px; padding: 6px 14px 12px; }
.mp-card { background: #fff; border-radius: 10px; padding: 6px; display: grid; gap: 2px; position: relative; border: 1px solid #E2E8F0; transition: transform .2s; min-width: 0; }
.mp-card:hover { transform: translateY(-3px); }
.mp-card .img { height: 44px; border-radius: 6px; background: linear-gradient(140deg, var(--pl), var(--p)); }
.mp-card .tag { position: absolute; top: 10px; left: 10px; color: #fff; font-size: 10px; padding: 0 7px; border-radius: 99px; font-weight: 700; }
.mp-card b { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-card small { color: #64748B; font-size: 10.5px; }
.mp-foot { padding: 10px 14px; background: var(--pd); color: #fff; font-size: 11px; }
.mp-anim { margin: 8px 14px; padding: 6px 10px; border-radius: 8px; background: var(--ink); color: #fff; font-size: 11px; }
.mp-tip { font-size: 12px; color: var(--dg-ink-faint); margin: 8px 0 0; }
.mp.dev { max-width: var(--w, 640px); margin: 0 auto; transition: max-width .3s var(--dg-ease); border: 2px solid var(--dg-ink); border-radius: 18px; }

/* STEP 0 */
.s11-chat { display: grid; gap: 8px; }
.s11-chat .spec { background: #fff; border-radius: 12px; padding: 10px 12px; display: grid; gap: 3px; font-size: 12px; color: #334155; border: 1px solid #E2E8F0; }
.s11-chat .spec b { font-family: var(--dg-font-mono); font-size: 11px; color: var(--dg-orange-strong); }
.s11-chat .spec em { color: var(--dg-bad); font-style: normal; }
.s11-chat .sw { display: flex; gap: 6px; margin-top: 4px; }
.s11-chat .sw i { width: 32px; height: 22px; border-radius: 6px; display: block; }
.bubble { padding: 10px 12px; border-radius: 12px; font-size: 12.5px; line-height: 1.7; max-width: 92%; }
.bubble.me { background: var(--dg-teal-strong); color: #fff; justify-self: end; border-bottom-right-radius: 3px; }
.bubble.ai { background: #fff; border: 1px solid #E2E8F0; color: #334155; border-bottom-left-radius: 3px; }
.bubble.tech { background: var(--dg-deep); color: #E6FBFD; justify-self: start; }
.bubble.tech small { display: block; font-family: var(--dg-font-mono); font-size: 10px; color: var(--dg-teal-glow); }

/* STEP 1 */
.s11-sheet { display: grid; gap: 10px; padding-bottom: 10px; }
.s11-sheet > div { padding: 0 12px; }
.s11-sheet .lab { display: block; font-family: var(--dg-font-mono); font-size: 10px; color: #64748B; margin: 8px 0 4px; }
.s11-sheet code { display: block; font-family: var(--dg-font-mono); font-size: 11px; background: #fff; border-radius: 8px; padding: 8px 10px; color: #334155; }
.s11-sheet .warn { display: block; font-style: normal; color: var(--dg-bad); font-size: 11.5px; margin-top: 4px; }
.s11-btns > div { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.mp-b { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 16px; font: 800 13px 'Noto Sans TC', sans-serif; border: 2px solid transparent; transition: all .2s; }
.mp-b.p { background: var(--ad); color: #fff; }
.mp-b.p.h { background: var(--pl); color: var(--ad); border-color: var(--ad); }
.mp-b.p.a { background: #7a2c10; }
.mp-b.x { opacity: .4; }
.mp-b.s { background: #fff; color: var(--pd); border-color: var(--pd); }
.mp-b.s.h { background: var(--pl); }
.mp-b.s.a { background: var(--pd); color: #fff; }
.mp-b.small { min-height: 26px; }
.s11-cardrow .mp-cards { padding: 0; }

/* STEP 3 */
.s11-map { padding: 10px; }
.s11-map .ctl { display: grid; gap: 6px; margin-bottom: 8px; }
.s11-map .g { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.s11-map .g span { padding: 3px 11px; border-radius: 99px; background: #fff; border: 1px solid #D3ECF0; font-weight: 700; cursor: pointer; }
.s11-map .g span.on { background: var(--p); border-color: var(--p); color: #fff; }
.s11-map .g.pr input { width: 140px; accent-color: var(--a); }
.s11-map .cnt { margin-top: 8px; font-size: 12px; color: #475569; }
.s11-map .cnt .n { font-size: 16px; color: var(--ad); }

/* STEP 4 */
.s11-listbar { display: flex; gap: 8px; padding: 8px 14px 0; flex-wrap: wrap; }
.s11-listbar .in { flex: 1; min-width: 140px; background: #fff; border: 1px solid #D3ECF0; border-radius: 10px; padding: 5px 10px; color: #94A3B8; }
.s11-listbar .sortb { background: #fff; border: 1px solid #D3ECF0; border-radius: 10px; padding: 5px 10px; font-weight: 700; cursor: pointer; }
.s11-listbar .sortb.on { background: var(--pl); border-color: var(--p); color: var(--pd); }
.s11-form + .okmsg { }
.more { text-align: center; padding: 4px 0 10px; }

/* STEP 5 */
.s11-detail { padding: 10px 12px; display: grid; gap: 10px; }
.s11-detail .gal { display: grid; grid-template-columns: 2fr 1fr; gap: 6px; }
.s11-detail .gal .main { height: 90px; background: linear-gradient(140deg, var(--p), var(--pd)); border-radius: 10px; display: grid; place-items: center; color: #fff; }
.s11-detail .gal .th { display: grid; gap: 4px; }
.s11-detail .gal .th i { background: var(--pl); border-radius: 6px; display: block; }
.s11-detail .body { display: grid; grid-template-columns: minmax(0, 1fr) 140px; gap: 10px; align-items: start; }
.s11-detail h4 { margin: 0 0 6px; font: 900 17px var(--hf); }
.s11-detail .tabs { display: flex; gap: 12px; border-bottom: 2px solid #D3ECF0; margin-bottom: 6px; }
.s11-detail .tabs span { padding: 3px 0; font-weight: 700; color: #64748B; }
.s11-detail .tabs span.on { color: var(--pd); border-bottom: 3px solid var(--p); margin-bottom: -2px; }
.s11-detail .book { background: #fff; border: 1px solid #E2E8F0; border-radius: 12px; padding: 10px; display: grid; gap: 3px; position: sticky; top: 4px; }
.s11-detail .book b { font-size: 18px; color: var(--pd); }
.s11-detail .book em, .s11-detail .mbar em { font-style: normal; font-size: 10px; color: #94A3B8; }
.s11-detail .mbar { display: flex; align-items: center; gap: 10px; background: #fff; border: 1px solid #E2E8F0; border-radius: 10px; padding: 8px 12px; }
.s11-detail .mbar b { margin-right: auto; color: var(--pd); }

/* STEP 6 */
.s11-form { padding: 14px; display: grid; gap: 8px; max-width: 420px; }
.s11-form h4 { margin: 0; font: 900 18px var(--hf); }
.s11-form small { color: #64748B; }
.s11-form label { display: grid; gap: 2px; font-weight: 700; }
.s11-form label b { color: #C2410C; }
.s11-form input, .s11-form textarea { font: inherit; padding: 7px 10px; border: 1.5px solid #CBD5E1; border-radius: 10px; background: #fff; width: 100%; }
.s11-form input.bad { border-color: #C2410C; background: #FFF7F2; }
.s11-form .err { color: #C2410C; font-style: normal; font-weight: 500; font-size: 11.5px; }
.s11-form .send { text-align: center; cursor: pointer; padding: 10px; font-size: 14px; border: 0; }
.s11-form .send.dis { opacity: .5; pointer-events: none; }
.s11-form .okmsg { background: var(--dg-ok-soft); color: #0B5B41; padding: 8px 12px; border-radius: 10px; font-weight: 700; }

/* STEP 7 */
.s11-dev { padding: 4px; }
.s11-tap { display: flex; gap: 8px; align-items: center; padding: 6px 14px 12px; flex-wrap: wrap; }
.s11-tap em { font-style: normal; font-size: 11px; color: #475569; }
.s11-tap .mp-b { min-height: 44px; }
.s11-tap .mp-b.small { min-height: 26px; }
.s11-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* STEP 8 */
.s11-site { padding: 12px; display: grid; gap: 12px; }
.s11-site .flow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.s11-site .pg { background: #fff; border: 1.5px solid var(--pd); border-radius: 10px; padding: 8px 10px; display: grid; gap: 2px; min-width: 96px; }
.s11-site .pg code { font-size: 10.5px; color: #64748B; }
.s11-site .ar { font-weight: 900; color: var(--a); }
.s11-site .chk { display: grid; gap: 4px; }
.s11-site .chk span { padding: 4px 10px; border-radius: 8px; background: #fff; color: #94A3B8; }
.s11-site .chk span.on { background: var(--dg-ok-soft); color: #0B5B41; font-weight: 700; }
.s11-site .pub { background: #fff; border-radius: 12px; padding: 10px 14px; }
.s11-site .pub ol { margin: 4px 0 0; padding-left: 1.2em; }