/* =========================================================
   ui04-ai.css｜ui04「ChatGPT × Figma Agent 協作法」
   前綴 ai-，只在 .uu-page 之下生效，沿用 ui-unit.css 的色彩變數。
   ChatGPT＝綠（--gpt），你＝琥珀，Figma Agent＝紫（--agent）
   ========================================================= */
.uu-page { --gpt: #10A37F; --gpt-soft: #E3F6F0; --gpt-strong: #0B7A5F; }

/* 分工 */
.ai-roles { display: grid; grid-template-columns: minmax(0,1fr) 92px minmax(0,1fr); gap: 12px; align-items: stretch; }
@media (max-width: 860px) { .ai-roles { grid-template-columns: 1fr; } .ai-mid { flex-direction: row !important; padding: 8px !important; } }
.ai-role { border-radius: 16px; padding: 18px 20px; border: 1.5px solid; }
.ai-role.gpt { background: var(--gpt-soft); border-color: #B5E6D6; }
.ai-role.fig { background: var(--agent-soft); border-color: #D6CEF6; }
.ai-role .tag { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--f-mono); padding: 6px 10px; border-radius: 20px; color: #fff; }
.ai-role.gpt .tag { background: var(--gpt); } .ai-role.fig .tag { background: var(--agent); }
.uu-page .ai-role h4 { font-size: 17px; font-weight: 900; margin: 10px 0 8px; }
.uu-page .ai-role ul { margin: 0; padding-left: 1.1em; }
.uu-page .ai-role li { font-size: 14px; line-height: 1.7; }
.ai-mid { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 16px; background: var(--amber-soft); padding: 12px 6px; text-align: center; }
.ai-mid span { font: 900 18px/1 var(--f-display); color: var(--amber); }
.ai-mid small { font-size: 11.5px; color: var(--ink-2); line-height: 1.4; }
.ai-mid i { color: var(--amber); font-size: 20px; }

/* 泳道圖 */
.ai-swim { border: 1px solid var(--line); border-radius: 16px; background: var(--paper); padding: 10px; margin-bottom: 12px; overflow-x: auto; }
.ai-swim svg { display: block; width: 100%; min-width: 720px; height: auto; font-family: var(--f-body); }
.ai-swim .lane rect { fill: #F6F8F9; }
.ai-swim .lane.gpt rect { fill: #EEF9F5; } .ai-swim .lane.you rect { fill: #FFF8E8; } .ai-swim .lane.fig rect { fill: #F3F0FC; }
.ai-swim .lane .ln { font: 900 13px/1 var(--f-body); }
.ai-swim .lane.gpt .ln { fill: var(--gpt-strong); } .ai-swim .lane.you .ln { fill: var(--amber); } .ai-swim .lane.fig .ln { fill: var(--agent); }
.ai-swim .ed { fill: none; stroke: #C5CDD2; stroke-width: 2.4; transition: stroke .3s; }
.ai-swim marker path { fill: #8A939C; }
.ai-swim .ed.done { stroke: var(--ink); }
.ai-swim .ed.back { stroke-dasharray: 6 5; stroke-width: 2; opacity: .35; transition: opacity .3s; }
.ai-swim .ed.back.bad { stroke: var(--warn); } .ai-swim .ed.back.ok { stroke: var(--agent); }
.ai-swim .lb { font: 800 11.5px/1 var(--f-body); text-anchor: middle; opacity: .35; transition: opacity .3s; }
.ai-swim .lb.bad { fill: var(--warn); } .ai-swim .lb.ok { fill: var(--agent); }
.ai-swim.at-end .ed.back, .ai-swim.at-end .lb { opacity: 1; }
.ai-swim .nd { cursor: pointer; }
.ai-swim .nd rect { fill: #fff; stroke: #D3DADE; stroke-width: 1.5; transition: all .25s; }
.ai-swim .nd circle { fill: #E9EEF0; transition: fill .25s; }
.ai-swim .nd .k { font: 900 11px/1 var(--f-mono); text-anchor: middle; fill: var(--ink-2); }
.ai-swim .nd .t { font: 800 12.5px/1 var(--f-body); text-anchor: middle; fill: var(--ink); }
.ai-swim .nd:hover rect, .ai-swim .nd:focus rect { stroke: var(--ink-3); }
.ai-swim .nd:focus { outline: none; }
.ai-swim .nd.done circle { fill: var(--good); } .ai-swim .nd.done .k { fill: #fff; }
.ai-swim .nd.on rect { stroke-width: 3; }
.ai-swim .nd.gpt.on rect { stroke: var(--gpt); fill: var(--gpt-soft); } .ai-swim .nd.you.on rect { stroke: var(--amber); fill: var(--amber-soft); } .ai-swim .nd.fig.on rect { stroke: var(--agent); fill: var(--agent-soft); }
.ai-swim .nd.on circle { fill: var(--ink); } .ai-swim .nd.on .k { fill: #fff; }
.ai-step .where { display: inline-flex; align-items: center; gap: 6px; font: 800 12px/1 var(--f-body) !important; padding: 5px 10px; border-radius: 20px; margin: 0 0 6px !important; }
.ai-step .where.gpt { background: var(--gpt-soft); color: var(--gpt-strong) !important; }
.ai-step .where.you { background: var(--amber-soft); color: var(--amber) !important; }
.ai-step .where.fig { background: var(--agent-soft); color: var(--agent) !important; }

/* 回哪一邊 */
.ai-which { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
@media (max-width: 860px) { .ai-which { grid-template-columns: 1fr; } }
.ai-w { border: 1.5px solid var(--line); border-radius: 14px; padding: 12px 14px; background: var(--paper); }
.uu-page .ai-w .q { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 0 0 10px; display: flex; gap: 8px; line-height: 1.6; }
.ai-w .q span { flex: none; width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: #fff; display: grid; place-items: center; font: 800 11px/1 var(--f-mono); margin-top: 1px; }
.ai-w .opts { display: flex; gap: 6px; flex-wrap: wrap; }
.ai-w .opts button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: #fff; border-radius: 9px; padding: 6px 12px; font: 700 13px/1.2 var(--f-body); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.ai-w .opts button[data-a="gpt"]:hover:not(:disabled) { border-color: var(--gpt); color: var(--gpt-strong); }
.ai-w .opts button[data-a="fig"]:hover:not(:disabled) { border-color: var(--agent); color: var(--agent); }
.ai-w .opts button:disabled { opacity: .45; cursor: default; }
.ai-w .opts button.right { opacity: 1; background: var(--good); border-color: var(--good); color: #fff; }
.ai-w .opts button.wrong { opacity: 1; background: var(--warn); border-color: var(--warn); color: #fff; }
.uu-page .ai-w .fb { margin: 10px 0 0; font-size: 13.5px; line-height: 1.7; padding: 8px 10px; border-radius: 9px; }
.ai-w .fb.ok { background: var(--good-soft); } .ai-w .fb.no { background: var(--warn-soft); }
.ai-w .fb b { margin-right: 4px; }
.uu-page .ai-w-score { grid-column: 1 / -1; margin: 2px 0 0; font-size: 13.5px; color: var(--ink-3); }
.ai-w-score b { color: var(--brand-strong); }

/* 產品定位卡 */
.ai-card { border-radius: 16px; border: 1.5px solid #B5E6D6; background: #fff; padding: 16px 18px; }
.uu-page .ai-card-h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; color: var(--gpt-strong); margin: 0 0 10px; }
.ai-card dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }
.ai-card dt { font-weight: 800; color: var(--ink-3); white-space: nowrap; }
.ai-card dd { margin: 0; color: var(--ink); }
.ai-bg { font-size: 13.5px; line-height: 1.75; background: var(--gpt-soft); border-radius: 12px; padding: 10px 12px; color: var(--ink); }
.ai-bg b { display: flex; align-items: center; gap: 6px; color: var(--gpt-strong); margin-bottom: 4px; }

/* 6 要素 */
.ai-els { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 8px; margin-bottom: 12px; }
@media (max-width: 1100px) { .ai-els { grid-template-columns: repeat(3, minmax(0,1fr)); } }
@media (max-width: 560px) { .ai-els { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ai-els button { text-align: left; border: 1.5px solid var(--line); background: var(--paper); border-radius: 12px; padding: 10px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; font: 800 14px/1.3 var(--f-body); color: var(--ink); transition: all .15s; }
.ai-els button b { width: 22px; height: 22px; border-radius: 6px; display: grid; place-items: center; font: 900 11px/1 var(--f-mono); color: #fff; margin-bottom: 4px; }
.ai-els button small { font-size: 11.5px; font-weight: 600; color: var(--ink-3); }
.ai-els button[data-e="bg"] b, [data-ai-sample] [data-e="bg"].on { --c: #2563EB; }
.ai-els button[data-e="task"] b, [data-ai-sample] [data-e="task"].on { --c: var(--gpt); }
.ai-els button[data-e="out"] b, [data-ai-sample] [data-e="out"].on { --c: var(--amber); }
.ai-els button[data-e="spec"] b, [data-ai-sample] [data-e="spec"].on { --c: var(--agent); }
.ai-els button[data-e="content"] b, [data-ai-sample] [data-e="content"].on { --c: var(--figjam); }
.ai-els button[data-e="limit"] b, [data-ai-sample] [data-e="limit"].on { --c: var(--warn); }
.ai-els button b { background: var(--c); }
.ai-els button.on, .ai-els button:hover { border-color: var(--ink); box-shadow: 0 10px 18px -14px rgba(0,0,0,.5); }
.ai-compare { display: grid; grid-template-columns: minmax(0,.7fr) minmax(0,1.3fr); gap: 12px; }
@media (max-width: 860px) { .ai-compare { grid-template-columns: 1fr; } }
.ai-bad, .ai-good { border-radius: 14px; padding: 14px 16px; }
.ai-bad { background: var(--warn-soft); } .ai-good { background: var(--good-soft); }
.uu-page .ai-compare .lab { display: flex; align-items: center; gap: 6px; font: 800 13px/1 var(--f-body); margin: 0 0 8px; }
.ai-bad .lab { color: var(--warn); } .ai-good .lab { color: var(--good); }
.uu-page .ai-compare .txt { font-size: 14.5px; line-height: 1.85; color: var(--ink); margin: 0; }
.uu-page .ai-bad .txt { font-size: 18px; font-weight: 800; }
.uu-page .ai-bad .why { font-size: 13px; margin: 8px 0 0; color: var(--ink-2); }
[data-ai-sample] [data-e] { border-radius: 4px; padding: 1px 0; transition: background .2s, color .2s, opacity .2s; }
[data-ai-sample] [data-e]:nth-child(odd) { background: rgba(255,255,255,.7); }
[data-ai-sample].has-on [data-e] { opacity: .35; }
[data-ai-sample].has-on [data-e].on { opacity: 1; background: var(--c); color: #fff; box-shadow: 0 0 0 3px var(--c); }

/* 檢查器 */
.ai-check { display: grid; grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); gap: 14px; }
@media (max-width: 960px) { .ai-check { grid-template-columns: 1fr; } }
.ai-check textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 12px; padding: 12px 14px; font: 14px/1.7 var(--f-body); color: var(--ink); resize: vertical; background: #FBFCFC; }
.ai-check textarea:focus { outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--brand-soft); }
.ai-check-btns { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.ai-check-out { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--paper); }
.uu-page .ai-c-empty { margin: 0; color: var(--ink-3); font-size: 14px; }
.ai-c-score { display: flex; align-items: baseline; gap: 6px; }
.ai-c-score b { font: 900 34px/1 var(--f-mono); }
.ai-c-score span { font: 700 14px/1 var(--f-mono); color: var(--ink-3); }
.ai-c-score em { font-style: normal; font-weight: 800; font-size: 14px; margin-left: 8px; }
.ai-c-score.good b, .ai-c-score.good em { color: var(--good); } .ai-c-score.mid b, .ai-c-score.mid em { color: var(--amber); } .ai-c-score.bad b, .ai-c-score.bad em { color: var(--warn); }
.ai-c-bar { height: 8px; border-radius: 4px; background: var(--line-2); overflow: hidden; margin: 10px 0 12px; }
.ai-c-bar i { display: block; height: 100%; transition: width .35s; }
.ai-c-bar i.good { background: var(--good); } .ai-c-bar i.mid { background: var(--amber); } .ai-c-bar i.bad { background: var(--warn); }
.uu-page .ai-c-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.uu-page .ai-c-list li { margin: 0; display: grid; grid-template-columns: 18px 92px minmax(0,1fr); gap: 6px; align-items: start; font-size: 13.5px; line-height: 1.55; }
.ai-c-list li b { color: var(--ink); }
.ai-c-list li.ok i { color: var(--good); } .ai-c-list li.ok span { color: var(--ink-3); }
.ai-c-list li.no i { color: var(--warn); } .ai-c-list li.no span { color: var(--ink-2); }
.uu-page .ai-c-warn { margin: 10px 0 0; font-size: 13px; color: var(--amber); display: flex; gap: 6px; }

/* 每一關切換表 */
.ai-st-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.ai-st-tabs button { display: inline-flex; align-items: center; gap: 6px; border: 1.5px solid var(--line); background: var(--paper); border-radius: 999px; padding: 6px 12px; font: 700 13px/1 var(--f-body); color: var(--ink-2); cursor: pointer; transition: all .15s; }
.ai-st-tabs button b { font: 800 11px/1 var(--f-mono); color: var(--brand-strong); }
.ai-st-tabs button:hover { border-color: var(--brand); color: var(--ink); }
.ai-st-tabs button.on { background: var(--ink); border-color: var(--ink); color: #fff; }
.ai-st-tabs button.on b { color: #7FE6E2; }
.ai-st-grid { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,.8fr) minmax(0,1fr); gap: 12px; animation: aiIn .3s var(--ease, ease); }
@media (max-width: 1100px) { .ai-st-grid { grid-template-columns: 1fr; } }
@keyframes aiIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.ai-st-step { position: relative; border-radius: 14px; padding: 16px 16px 14px; border: 1.5px solid; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ai-st-step.gpt { background: var(--gpt-soft); border-color: #B5E6D6; }
.ai-st-step.you { background: var(--amber-soft); border-color: #F2DDA5; }
.ai-st-step.fig { background: var(--agent-soft); border-color: #D6CEF6; }
.ai-st-step .n { position: absolute; top: -10px; right: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font: 900 12px/1 var(--f-mono); color: #fff; background: var(--ink); }
.uu-page .ai-st-step .h { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 14px; margin: 0; }
.ai-st-step.gpt .h { color: var(--gpt-strong); } .ai-st-step.you .h { color: var(--amber); } .ai-st-step.fig .h { color: var(--agent); }
.uu-page .ai-st-step .h2 { font-size: 13px; color: var(--ink-2); margin: 0; display: flex; gap: 6px; line-height: 1.6; }
.uu-page .ai-st-step p { font-size: 14px; margin: 0; }
.ai-st-step pre { margin: 0; width: 100%; white-space: pre-wrap; font: 13px/1.75 var(--f-body); color: var(--ink); background: rgba(255,255,255,.75); border-radius: 10px; padding: 10px 12px; max-height: 260px; overflow: auto; }
.uu-page .ai-st-step ul { margin: 0; padding-left: 1.1em; }
.uu-page .ai-st-step li { font-size: 13.5px; }

/* 各關卡插入的「③-1 先問 ChatGPT」 */
.uu-part.gpt { color: var(--gpt-strong); }
.uu-part.gpt .k { background: var(--gpt) !important; color: #fff !important; }
.uu-prompt.ai-gpt .uu-prompt-head { background: #0E3B30; }
.ai-bring { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin: 10px 0 18px; }
@media (max-width: 960px) { .ai-bring { grid-template-columns: 1fr; } }
.ai-bring > div { border-radius: 12px; padding: 10px 12px; background: var(--canvas); border: 1px solid var(--line-2); }
.ai-bring > div:nth-child(1) { background: var(--amber-soft); border-color: #F2DDA5; }
.ai-bring > div:nth-child(2) { background: var(--agent-soft); border-color: #D6CEF6; }
.ai-bring b { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink); margin-bottom: 4px; }
.uu-page .ai-bring p { margin: 0; font-size: 13.5px; line-height: 1.65; }
.uu-page .ai-bring ul { margin: 0; padding-left: 1.1em; }
.uu-page .ai-bring li { font-size: 13px; margin: 2px 0; line-height: 1.55; }
.uu-page .uu-part .k { width: auto; min-width: 26px; padding: 0 6px; }

/* ---------- 三種讀法（講義／影片／簡報）與第七週影片・簡報章節 ---------- */
.u4-modes { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 14px; margin: 14px 0 22px; }
.u4-mode { display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 16px; border: 1.5px solid var(--line, #DDE5E7); background: var(--paper, #fff); text-decoration: none; color: var(--ink, #16191C); transition: transform .2s, box-shadow .2s, border-color .2s; }
.u4-mode:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(15,40,42,.12); }
.u4-mode .ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; font-size: 22px; color: #fff; }
.u4-mode b { font-size: 18px; font-weight: 900; margin-top: 4px; }
.u4-mode > span:not(.ic) { font-size: 13.5px; line-height: 1.7; color: var(--ink-2, #46505A); flex: 1; }
.u4-mode em { font-style: normal; font-size: 13px; font-weight: 800; }
.u4-mode.m-read .ic { background: #0ABAB5; } .u4-mode.m-read em { color: #067A76; } .u4-mode.m-read:hover { border-color: #0ABAB5; }
.u4-mode.m-video .ic { background: #EE4A85; } .u4-mode.m-video em { color: #C2306A; } .u4-mode.m-video:hover { border-color: #EE4A85; }
.u4-mode.m-deck .ic { background: #6350C4; } .u4-mode.m-deck em { color: #4B3BA6; } .u4-mode.m-deck:hover { border-color: #6350C4; }
.u4-remote { display: flex; gap: 12px; align-items: flex-start; background: #FFF4D6; border: 1px solid #F2D58A; border-radius: 14px; padding: 12px 16px; font-size: 14px; line-height: 1.7; color: #5A4300; margin-bottom: 8px; }
.u4-remote i { font-size: 22px; color: #D98F00; line-height: 1.2; }
.u4-remote b { display: block; color: #3D2D00; }
.u4-strip { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 10px; margin: 12px 0 14px; }
.u4-strip a { text-decoration: none; color: var(--ink-2, #46505A); font-size: 12.5px; font-weight: 700; }
.u4-strip img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; border-radius: 10px; border: 1px solid var(--line, #DDE5E7); margin-bottom: 5px; transition: transform .2s, box-shadow .2s; }
.u4-strip a:hover img { transform: translateY(-2px); box-shadow: 0 10px 22px rgba(15,40,42,.15); }
.u4-deckbtns { display: flex; gap: 10px; flex-wrap: wrap; }
#s-video kbd { font: 700 11px/1 "SF Mono", Menlo, monospace; background: var(--canvas, #F1F4F5); border: 1px solid var(--line, #DDE5E7); border-bottom-width: 2px; border-radius: 5px; padding: 2px 5px; margin: 0 2px; }
@media (max-width: 860px) { .u4-modes { grid-template-columns: 1fr; } .u4-strip { grid-template-columns: repeat(3, minmax(0,1fr)); } }
.u4-deckbtns .uu-btn.ghost { color: #067A76; background: #fff; border: 1.5px solid #0ABAB5; }
.u4-deckbtns .uu-btn.ghost:hover { background: #DFF6F4; }