/* =========================================================
   UNIT 08 OnePage 實作（一）：兩個範例（前綴 w8-）
   需搭配 web-neo.css、web-unit.css（.wu-light）、web06-plan.css（wp- 按鈕）、web07-lab.css（w7- 小元件）
   ========================================================= */
.w8-h4 { font-family: var(--nx-display); font-size: 17px; font-weight: 700; color: #0b1020; margin: 22px 0 8px; display: flex; gap: 8px; align-items: center; }
.w8-h4 i { color: #3d7a00; }
.wu-light p.w8-note { font-size: 14px !important; background: #eef4fb; border-radius: 10px; padding: 10px 14px; color: #2b3350 !important; }
.w8-code { background: #0b0d14; color: #c3cbe0; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.7; padding: 12px 14px; border-radius: 10px; white-space: pre-wrap; margin: 10px 0; }
.w8-code .t, .w8-stepcode .t, .w8-repout .t { color: #ff7ab2; } .w8-code .a, .w8-stepcode .a { color: #3df0ff; } .w8-code .s, .w8-stepcode .s { color: #c6ff3d; } .w8-stepcode .c { color: #5b6378; }

/* 兩個範例 */
.w8-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 14px 0 18px; }
@media (max-width: 760px) { .w8-two { grid-template-columns: minmax(0, 1fr); } }
.w8-ex { display: flex; flex-direction: column; border-radius: 18px; padding: 20px 22px; background: linear-gradient(150deg, #0b0d14, #1b2a6b); color: #c3cbe0 !important; text-decoration: none !important; transition: transform .25s var(--nx-ease), box-shadow .25s; box-shadow: 0 18px 40px -24px rgba(6, 7, 11, .7); }
.w8-ex.b { background: linear-gradient(150deg, #1d2a10, #3d7a00); }
.w8-ex:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -22px rgba(6, 7, 11, .8); }
.w8-ex .tag { font-family: var(--nx-mono); font-size: 11.5px; letter-spacing: .08em; color: #c6ff3d; }
.w8-ex h4 { font-family: var(--nx-display); font-size: 22px; color: #fff; margin: 6px 0 8px; }
.w8-ex p { font-size: 14.5px; line-height: 1.75; margin: 0 0 10px; color: #dfe5f5; }
.w8-ex ul { margin: 0 0 12px; padding-left: 18px; font-size: 13.5px; line-height: 1.8; flex: 1; }
.w8-ex .go { align-self: flex-start; background: #c6ff3d; color: #06070b; font-weight: 700; font-size: 13.5px; padding: 6px 14px; border-radius: 999px; }

/* 必做項目 */
.w8-req { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 12px 0 18px; }
@media (max-width: 860px) { .w8-req { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .w8-req { grid-template-columns: minmax(0, 1fr); } }
.w8-reqi { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 0 8px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--nx-line); background: #fff; text-decoration: none !important; transition: all .2s; }
.w8-reqi i { grid-row: span 2; font-size: 18px; color: #3a63e0; width: 30px; height: 30px; border-radius: 9px; background: #e9eeff; display: grid; place-items: center; }
.w8-reqi b { font-size: 14px; color: #0b1020; } .w8-reqi span { font-size: 12px; color: var(--nx-dim); line-height: 1.5; }
a.w8-reqi:hover { border-color: #3d7a00; transform: translateY(-2px); }
.w8-reqi.more { grid-column: 1 / -1; background: #fffaf0; border-style: dashed; } .w8-reqi.more i { color: #c77700; background: #fff1d6; }

/* 8 步路線 */
.w8-route .wu-stepcard .goal { font-size: 15.5px !important; }
.w8-stepcode { border-radius: 12px; overflow: hidden; background: #0b0d14; margin: 10px 0; }
.w8-stepcode .wu-code-bar { display: flex; justify-content: space-between; align-items: center; padding: 7px 12px; background: rgba(255, 255, 255, .04); border-bottom: 1px solid rgba(160, 180, 255, .14); font-family: var(--nx-mono); font-size: 12px; color: #8d96ad; }
.w8-stepcode .wu-code-bar button { font-family: var(--nx-mono); font-size: 11.5px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.w8-stepcode .wu-code-bar button:hover { background: #c6ff3d; color: #06070b; }
.w8-stepcode pre { margin: 0; padding: 12px 14px; color: #c3cbe0; font-family: var(--nx-mono); font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.w8-proof { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; background: #eaf6d6; border-radius: 10px; padding: 10px 14px; margin-top: 10px; font-size: 14.5px; color: #1f3d00; }
.w8-proof b { display: flex; gap: 6px; color: #2f6300; }
.w8-stepbtns { justify-content: space-between; }
.w8-done { display: inline-flex; gap: 8px; align-items: center; font-size: 14.5px; font-weight: 700; color: #2f6300; cursor: pointer; padding: 8px 14px; border-radius: 10px; border: 1.5px dashed rgba(61, 122, 0, .45); background: #f4f9ea; }
.w8-done input { width: 18px; height: 18px; accent-color: #3d7a00; }

/* 範例一 */
.w8-flow { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 4px 0 6px; font-size: 13.5px; font-weight: 700; color: var(--nx-dim); }
.w8-flow span { padding: 5px 12px; border-radius: 999px; border: 1px solid var(--nx-line); background: #fff; }
.w8-flow span.on { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.w8-flow i { color: var(--nx-faint); font-size: 12px; }
.w8-bench { border: 1px solid #1b2033; border-radius: 16px; overflow: hidden; background: #0b0d14; box-shadow: 0 24px 50px -26px rgba(6, 7, 11, .7); margin: 10px 0 14px; }
.w8-bench-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); }
.w8-bench-bar .grp { display: flex; gap: 6px; flex-wrap: wrap; }
.w8-bench-bar .act { font-family: var(--nx-mono); font-size: 12px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); padding: 6px 11px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.w8-bench-bar .act:hover { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.w8-dev button { flex: none; font-size: 12px; padding: 6px 10px; background: transparent; color: #c3cbe0; border-color: rgba(160, 180, 255, .2); }
.w8-dev button[aria-pressed="true"] { background: #c6ff3d !important; color: #06070b !important; border-color: #c6ff3d !important; }
.w8-hint { font-size: 12.5px; color: #8d96ad; }
.w8-preview { background: repeating-linear-gradient(45deg, #151925, #151925 10px, #11141e 10px, #11141e 20px); padding: 12px; overflow-x: auto; }
.w8-preview iframe { display: block; width: 100%; height: 600px; margin: 0 auto; border: 0; background: #fff; border-radius: 8px; transition: width .35s var(--nx-ease); }
@media (max-width: 600px) { .w8-preview iframe { height: 520px; } }
.w8-apply { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; }
.w8-apply > div { flex: 1 1 320px; } .w8-apply b { display: block; font-size: 15px; color: #0b1020; } .w8-apply span { font-size: 13.5px; color: var(--nx-dim); line-height: 1.7; }
.w8-meta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 10px; margin: 10px 0; }
@media (max-width: 700px) { .w8-meta { grid-template-columns: minmax(0, 1fr); } }
.w8-meta span { display: block; font-size: 13px; font-weight: 700; color: #2b3350; margin-bottom: 4px; }
.w8-meta .wu-input { font-family: var(--nx-sans); padding: 9px 12px; }
.w8-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0 0; font-size: 13px; color: var(--nx-dim); }
.w8-quick button { font-size: 12.5px; padding: 4px 11px; border-radius: 999px; border: 1px solid var(--nx-line); background: #fff; color: #2b3350; cursor: pointer; }
.w8-quick button:hover { border-color: #3d7a00; color: #2f6300; }
.w8-edgrid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); min-height: 460px; }
@media (max-width: 900px) { .w8-edgrid { grid-template-columns: minmax(0, 1fr); } .w8-edgrid iframe { height: 420px; } }
.w8-edgrid textarea { width: 100%; min-height: 460px; resize: vertical; border: 0; outline: 0; background: #0b0d14; color: #e8ecf6; font-family: var(--nx-mono); font-size: 13px; line-height: 1.75; padding: 14px 16px; tab-size: 2; white-space: pre; overflow: auto; border-right: 1px solid rgba(160, 180, 255, .14); }
.w8-edgrid textarea:focus { box-shadow: inset 0 0 0 2px #4d7cff; }
.w8-edgrid iframe { width: 100%; height: 100%; min-height: 460px; border: 0; background: #fff; }
.wu-light p.w8-edhelp { margin: 0 !important; padding: 8px 14px; font-size: 12.5px !important; color: #8d96ad !important; background: #0f121b; border-top: 1px solid rgba(160, 180, 255, .14); }
.wu-light p.w8-status { font-size: 13px !important; color: #2f6300 !important; min-height: 20px; margin: 0 0 8px !important; font-family: var(--nx-mono); }
.w8-image textarea { margin: 8px 0; font-size: 12px; word-break: break-all; }
.w8-file { display: inline-flex; gap: 6px; align-items: center; margin-top: 6px; padding: 7px 12px; border-radius: 9px; border: 1px solid var(--nx-line); background: #fff; cursor: pointer; font-size: 13.5px; color: #2b3350; }
.w8-file:hover { border-color: #3d7a00; }
.w8-audit { border: 1px solid var(--nx-line); border-radius: 14px; background: #fff; padding: 14px 16px; }
.w8-audit .hd { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; margin-bottom: 8px; }
.w8-audit .hd b { display: flex; gap: 6px; font-size: 15px; color: #0b1020; } .w8-audit .hd b i { color: #3d7a00; }
.w8-audit .hd span { font-size: 12.5px; color: var(--nx-dim); }
.w8-audit ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 640px) { .w8-audit ul { grid-template-columns: minmax(0, 1fr); } }
.w8-audit li { display: flex; gap: 8px; align-items: flex-start; font-size: 13.5px; padding: 7px 10px; border-radius: 9px; line-height: 1.5; }
.w8-audit li.ok { background: #f4f9ea; color: #1f3d00; } .w8-audit li.ok i { color: #3d7a00; }
.w8-audit li.bad { background: #fff6dc; color: #6b4b00; } .w8-audit li.bad i { color: #c77700; }
.w8-dl { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 6px; }

/* 範例二 */
.w8-dlinks { margin-bottom: 18px; }
.w8-parts { display: flex; gap: 6px; overflow-x: auto; padding: 4px 2px 10px; position: sticky; top: 64px; z-index: 5; background: linear-gradient(#f4f6fb 85%, rgba(244, 246, 251, 0)); }
@media (max-width: 1000px) { .w8-parts { top: 112px; } }
.w8-parts button { flex: none; display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; padding: 8px 13px; border-radius: 10px; border: 1.5px solid var(--nx-line); background: #fff; color: #2b3350; cursor: pointer; transition: all .15s; white-space: nowrap; }
.w8-parts button i { color: #3a63e0; }
.w8-parts button.seen { border-color: rgba(61, 122, 0, .4); }
.w8-parts button:hover { border-color: #3d7a00; }
.w8-parts button[aria-selected="true"] { background: #0b0d14; border-color: #0b0d14; color: #c6ff3d; font-weight: 700; } .w8-parts button[aria-selected="true"] i { color: #c6ff3d; }
.w8-part { border: 1px solid var(--nx-line); border-radius: 18px; background: #fff; padding: 6px 24px 20px; box-shadow: 0 14px 34px -22px rgba(20, 30, 80, .4); }
@media (max-width: 600px) { .w8-part { padding: 4px 14px 16px; } }
.w8-part > div > h3:first-child { margin-top: 18px; }
.w8-part .wu-steps > li, .w8-part .wu-tool, .w8-part .wu-tablewrap { box-shadow: none; }
.w8-partbtns { justify-content: space-between; }
.w8-tree { white-space: pre; font-size: 13px; line-height: 1.8; overflow-x: auto; }
.w8-files { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 14px; }
.w8-files span { font-family: var(--nx-mono); font-size: 13px; padding: 6px 12px; border-radius: 8px; background: #0b0d14; color: #c6ff3d; display: inline-flex; gap: 6px; align-items: center; }
.w8-headf { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; margin-bottom: 4px; }
.w8-headf .full { grid-column: 1 / -1; }
@media (max-width: 600px) { .w8-headf { grid-template-columns: minmax(0, 1fr); } }
.w8-headf span, .w8-rep-ctrl span { display: block; font-size: 12.5px; font-weight: 700; color: #2b3350; margin-bottom: 3px; }
.w8-headf .wu-input, .w8-rep-ctrl .wu-input { font-family: var(--nx-sans); padding: 8px 10px; font-size: 14px; }
.w8-navgen { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 12px; }
@media (max-width: 700px) { .w8-navgen { grid-template-columns: minmax(0, 1fr); } }
.w8-navgen textarea { font-size: 13.5px; line-height: 1.7; }
.w8-navpv { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; padding: 12px 14px; border-radius: 10px; background: #0b0d14; }
.w8-navpv b { color: #c6ff3d; margin-right: auto; font-size: 14px; }
.w8-navpv span { color: #fff; font-size: 13.5px; display: grid; text-align: center; }
.w8-navpv small { font-family: var(--nx-mono); font-size: 10.5px; color: #8d96ad; }
.w8-g12 { border: 1px solid var(--nx-line); border-radius: 12px; padding: 10px; background: #fafbfd; overflow-x: auto; }
.w8-g12 .ruler, .w8-g12 .row { display: grid; grid-template-columns: repeat(12, minmax(28px, 1fr)); gap: 4px; margin: 0; min-width: 380px; }
.w8-g12 .ruler i { font-style: normal; text-align: center; font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); background: #eef1f7; border-radius: 4px; padding: 2px 0; }
.w8-g12 .row { margin-top: 6px; row-gap: 6px; }
.w8-g12 .cell { min-height: 64px; border-radius: 8px; background: #3a63e0; color: #fff; display: grid; place-content: center; gap: 4px; text-align: center; padding: 4px; }
.w8-g12 .cell:nth-child(2n) { background: #3d7a00; } .w8-g12 .cell:nth-child(3n) { background: #ff7a45; }
.w8-g12 .cell.over { outline: 2px dashed #d62c7e; }
.w8-g12 .cell b { font-family: var(--nx-mono); font-size: 12px; }
.w8-g12 .cell span { display: flex; gap: 4px; justify-content: center; }
.w8-g12 .cell button { width: 22px; height: 22px; border-radius: 6px; border: 0; background: rgba(255, 255, 255, .25); color: #fff; font-weight: 700; cursor: pointer; line-height: 1; }
.w8-g12 .cell button:hover { background: #fff; color: #0b1020; }
#g12Msg .ok { color: #2f6300; font-weight: 700; } #g12Msg .bad { color: #d62c7e; }
.w8-rep-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 12px; align-items: end; margin-bottom: 10px; }
.w8-rep-ctrl .w7-sw { grid-column: 1 / -1; margin: 0; }
@media (max-width: 600px) { .w8-rep-ctrl { grid-template-columns: minmax(0, 1fr); } }
.w8-cc { display: flex !important; gap: 6px; align-items: center; } .w8-cc input[type=color] { width: 40px; height: 36px; border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.w8-rep { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
@media (max-width: 760px) { .w8-rep { grid-template-columns: minmax(0, 1fr); } }
.w8-rep textarea { font-size: 12.5px; line-height: 1.7; min-height: 230px; }
.w8-repout { margin: 0; min-height: 230px; background: #0b0d14; color: #c3cbe0; border-radius: 10px; padding: 12px 14px; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.w8-repout mark { padding: 0 3px; border-radius: 4px; font-weight: 700; }

/* 05 實驗室 */
.w8-labs .wu-tool { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.w8-labs .wu-tool > .wp-btn { align-self: flex-start; margin-top: auto; }
.w8-sel span { display: block; font-size: 13px; font-weight: 700; color: #2b3350; margin-bottom: 3px; }
.w8-sel .wu-input { font-family: var(--nx-sans); padding: 7px 10px; font-size: 14px; cursor: pointer; }
.w8-gridpv { display: grid; gap: 6px; margin: 4px 0; }
.w8-gr { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; align-items: center; font-size: 12px; color: var(--nx-dim); font-weight: 700; }
.w8-gr div { display: grid; }
.w8-gr i { font-style: normal; height: 18px; border-radius: 4px; background: #9db4ff; color: #fff; font-size: 10px; display: grid; place-items: center; }
.w8-colors { display: flex; gap: 14px; flex-wrap: wrap; }
.w8-colors label { display: grid; justify-items: center; gap: 2px; font-size: 12.5px; font-weight: 700; color: #2b3350; cursor: pointer; }
.w8-colors input { width: 46px; height: 38px; border: 0; padding: 0; background: none; cursor: pointer; }
.w8-colorpv { border-top: 8px solid #264653; border-radius: 12px; padding: 16px; display: grid; gap: 4px; border-left: 1px solid var(--nx-line); border-right: 1px solid var(--nx-line); border-bottom: 1px solid var(--nx-line); }
.w8-colorpv b { font-size: 18px; } .w8-colorpv span { font-size: 14px; }
.w8-colorpv i { font-style: normal; justify-self: start; margin-top: 6px; padding: 5px 14px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.w8-labs .wu-verdict { font-size: 14.5px; margin: 4px 0; }

/* 07 學長姐 */
.w8-samples { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 12px 0 20px; }
@media (max-width: 860px) { .w8-samples { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .w8-samples { grid-template-columns: minmax(0, 1fr); } }
.w8-sample { border: 1px solid var(--nx-line); border-radius: 14px; background: #fff; padding: 12px 14px; display: grid; gap: 2px; }
.w8-sample b { font-size: 15px; color: #0b1020; display: flex; gap: 6px; align-items: center; } .w8-sample b i { color: #f2a541; }
.w8-sample small { font-size: 12.5px; color: var(--nx-dim); }
.w8-sample .lk { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.w8-sample .lk a { font-size: 12.5px; padding: 3px 10px; border-radius: 999px; border: 1px solid rgba(11, 109, 168, .35); text-decoration: none !important; display: inline-flex; gap: 4px; align-items: center; }
.w8-sample .lk a:hover { background: #e3f1fb; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid #4d7cff; outline-offset: 2px; }
@media (max-width: 600px) {
  .w8-route .wu-stepnav { flex-wrap: wrap; overflow: visible; }
  .w8-route .wu-stepnav button { width: 38px; height: 38px; }
  .w8-dev { flex-wrap: wrap; }
  .w8-dev button { padding: 5px 8px; font-size: 11.5px; }
}
/* 範例卡片在深色底上：覆蓋 .wu-light .wu-main p 的深色文字 */
.wu-light .wu-main .w8-ex p { color: #dfe5f5 !important; }   /* 只修正深色卡片上的小字顏色 */
.w8-ex ::selection { background: #c6ff3d; color: #06070b; }

/* 範例二：新版範本截圖與區塊地圖、配色試算 */
.w8-shots { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.w8-shots .wu-fig { margin: 0; } .w8-shots img { width: 100%; }
.w8-map { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 18px; align-items: start; margin: 16px 0; }
@media (max-width: 640px) { .w8-map { grid-template-columns: 110px minmax(0, 1fr); gap: 12px; } }
.w8-map figure { margin: 0; max-height: 520px; overflow-y: auto; border-radius: 10px; border: 1px solid var(--nx-line); }
.w8-map img { width: 100%; display: block; }
.w8-map ol { margin: 0; padding-left: 22px; display: grid; gap: 4px; font-size: 14px; line-height: 1.6; color: #2b3350; }
.w8-map ol li::marker { color: #3d7a00; font-weight: 700; }
.w8-map b { margin-right: 6px; } .w8-map code { font-size: 12px !important; }
.w8-map .hi { background: #fff1d6; color: #7a4b00; border-radius: 5px; padding: 0 6px; font-size: 12.5px; }
.w8-vars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 10px; }
@media (max-width: 600px) { .w8-vars { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w8-var { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border: 1px solid var(--nx-line); border-radius: 10px; background: #fff; cursor: pointer; }
.w8-var input { width: 36px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.w8-var span { font-size: 12px; color: var(--nx-dim); line-height: 1.3; } .w8-var b { display: block; font-family: var(--nx-mono); font-size: 12.5px; color: #0b1020; }
.w8-varpv { border-radius: 14px; overflow: hidden; border: 1px solid var(--nx-line); font-family: var(--nx-sans); }
.w8-varpv .nav { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .06); }
.w8-varpv .nav b { display: flex; gap: 6px; align-items: center; font-size: 14px; } .w8-varpv .nav b i { width: 18px; height: 18px; border-radius: 50%; }
.w8-varpv .nav span { display: flex; gap: 10px; align-items: center; font-size: 12.5px; font-weight: 700; }
.w8-varpv .nav .cta { color: #fff; padding: 3px 12px; border-radius: 999px; }
.w8-varpv .body { padding: 16px; text-align: center; }
.w8-varpv small { font-size: 11px; letter-spacing: .2em; font-weight: 700; } .w8-varpv h5 { font-weight: 900; margin: 2px 0 6px; font-size: 20px; }
.w8-varpv .line { display: block; width: 40px; height: 4px; border-radius: 4px; margin: 0 auto 8px; }
.wu-light .wu-main .w8-varpv p { font-size: 13.5px !important; margin: 0 0 10px !important; color: inherit !important; }
.w8-varpv .btns { display: flex; gap: 8px; justify-content: center; } .w8-varpv .btns span { color: #fff; font-size: 12.5px; font-weight: 700; padding: 5px 14px; border-radius: 999px; }
.w8-varpv .bar { height: 8px; border-radius: 8px; background: rgba(0, 0, 0, .08); margin: 14px auto 12px; max-width: 260px; overflow: hidden; } .w8-varpv .bar i { display: block; width: 75%; height: 100%; }
.w8-varpv .band { margin: 0 -16px -16px; padding: 14px; font-size: 12px; letter-spacing: .2em; font-weight: 700; }

/* ================= 範例一：光影社網站工作台 ================= */
.w8-how { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 4px 0 14px; font-size: 13.5px; color: #2b3350; }
.w8-how span { display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px 5px 6px; border-radius: 999px; background: #fff; border: 1px solid var(--nx-line); }
.w8-how b { width: 22px; height: 22px; border-radius: 50%; background: #0b0d14; color: #c6ff3d; display: grid; place-items: center; font-size: 12px; }
.w8-how > i { color: var(--nx-faint); font-size: 12px; }
.w8-ws { border: 1px solid var(--nx-line); border-radius: 20px; background: #fff; box-shadow: 0 24px 50px -30px rgba(20, 30, 80, .5); overflow: hidden; margin-bottom: 18px; }
.w8-ws-top { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 12px 14px; background: #f4f6fb; border-bottom: 1px solid var(--nx-line); }
.w8-tasknav { display: flex; gap: 4px; overflow-x: auto; flex: 1 1 520px; padding-bottom: 2px; }
.w8-tasknav.dim { opacity: .45; }
.w8-tasknav button { flex: none; display: inline-flex; gap: 6px; align-items: center; padding: 5px 11px 5px 5px; border-radius: 999px; border: 1.5px solid var(--nx-line); background: #fff; font-size: 13px; color: #2b3350; cursor: pointer; white-space: nowrap; transition: all .15s; }
.w8-tasknav button b { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: #eef1f8; font-size: 12px; color: var(--nx-dim); }
.w8-tasknav button.done b { background: #3d7a00; color: #fff; }
.w8-tasknav button:hover { border-color: #3d7a00; }
.w8-tasknav button[aria-selected="true"] { background: #0b0d14; border-color: #0b0d14; color: #fff; font-weight: 700; }
.w8-tasknav button[aria-selected="true"] b { background: #c6ff3d; color: #06070b; }
.w8-mode { flex: none; } .w8-mode button { flex: none; padding: 7px 12px; font-size: 13px; }
.w8-ws-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
@media (max-width: 1100px) { .w8-ws-grid { grid-template-columns: minmax(0, 1fr); } }
.w8-ws-left { border-right: 1px solid var(--nx-line); max-height: 760px; overflow-y: auto; }
@media (max-width: 1100px) { .w8-ws-left { border-right: 0; border-bottom: 1px solid var(--nx-line); max-height: none; } }
.w8-ws-right { background: #e9ecf3; display: flex; flex-direction: column; }
.w8-pvbar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; background: #0f121b; }
.w8-pvbar .wu-seg2 button { background: transparent; color: #c3cbe0; border-color: rgba(160, 180, 255, .2); padding: 5px 10px; font-size: 12px; flex: none; }
.w8-pvbar .wu-seg2 button[aria-pressed="true"] { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.w8-saved { font-family: var(--nx-mono); font-size: 11.5px; color: #8d96ad; }
.w8-ws-right .w8-preview { flex: 1; padding: 10px; }
.w8-ws-right .w8-preview iframe { height: 700px; }
@media (max-width: 1100px) { .w8-ws-right .w8-preview iframe { height: 560px; } }
/* 任務卡 */
.w8-task { padding: 18px 20px 20px; }
.w8-task .hd { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; }
.w8-task .no { width: 44px; height: 44px; border-radius: 12px; background: #0b0d14; color: #c6ff3d; font-family: var(--nx-mono); font-weight: 700; font-size: 18px; display: grid; place-items: center; flex: none; }
.w8-task .hd small { font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-faint); }
.w8-task .hd h3 { margin: 0 !important; font-size: 20px !important; }
.wu-light .wu-main .w8-task p.learn { font-size: 14px !important; line-height: 1.8 !important; background: #eef4fb; border-left: 4px solid #3a63e0; border-radius: 0 10px 10px 0; padding: 10px 14px; color: #2b3350 !important; margin: 0 0 14px !important; }
.w8-task .learn i { color: #3a63e0; }
.w8-f { display: block; margin-bottom: 10px; }
.w8-f .lbl { display: block; font-size: 13px; font-weight: 700; color: #2b3350; margin-bottom: 4px; }
.w8-f .wu-input { font-family: var(--nx-sans); font-size: 14.5px; padding: 8px 11px; }
.w8-f textarea.wu-input { resize: vertical; line-height: 1.7; }
.w8-fc { display: flex !important; gap: 10px; align-items: center; padding: 6px 10px; border: 1px solid var(--nx-line); border-radius: 10px; cursor: pointer; }
.w8-fc input { width: 44px; height: 34px; border: 0; padding: 0; background: none; cursor: pointer; flex: none; }
.w8-fc .lbl { margin: 0; } .w8-fc code { margin-left: 8px; font-size: 12px !important; }
.w8-seg { display: flex; gap: 6px; } .w8-seg button { flex: 1; padding: 8px 6px; font-size: 13.5px; }
.w8-seg button small { display: block; font-family: var(--nx-mono); font-size: 10.5px; opacity: .7; }
.w8-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
@media (max-width: 480px) { .w8-pick { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.w8-pick button, .w8-pick .up { aspect-ratio: 16 / 10; border-radius: 8px; border: 2px solid transparent; background: #eef1f8 center / cover no-repeat; cursor: pointer; transition: all .15s; padding: 0; }
.w8-pick button:hover { transform: translateY(-2px); }
.w8-pick button[aria-pressed="true"] { border-color: #3d7a00; box-shadow: 0 0 0 3px rgba(61, 122, 0, .3); }
.w8-pick .up { display: grid; place-items: center; border: 2px dashed var(--nx-faint); color: var(--nx-dim); font-size: 18px; }
.w8-pick .up:hover { border-color: #3d7a00; color: #2f6300; }
.w8-pal { display: flex; flex-wrap: wrap; gap: 6px; }
.w8-pal button { display: inline-flex; align-items: center; padding: 4px 9px 4px 4px; border-radius: 8px; border: 1px solid var(--nx-line); background: #fff; cursor: pointer; }
.w8-pal button:hover { border-color: #3d7a00; } .w8-pal i { width: 14px; height: 22px; display: block; } .w8-pal em { font-style: normal; font-size: 12.5px; margin-left: 6px; color: #2b3350; }
.w8-navmap { display: grid; gap: 4px; margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: #0b0d14; }
.w8-navmap div { display: grid; grid-template-columns: 1fr 24px 1fr; align-items: center; text-align: center; font-size: 12px; color: #8d96ad; }
.w8-navmap code { background: none !important; border: 0 !important; color: #c6ff3d !important; font-size: 12px !important; }
.w8-navmap i { color: #8d96ad; }
.w8-grp { border: 1px solid var(--nx-line); border-radius: 12px; padding: 10px 12px 2px; margin: 10px 0; background: #fafbfd; }
.w8-grp legend { float: none; width: auto; font-size: 13px; font-weight: 700; color: #3d7a00; padding: 0 6px; margin: 0 0 4px; }
.w8-grp.inline { display: grid; grid-template-columns: 1fr 1.6fr; gap: 0 8px; }
.w8-grp.inline legend { grid-column: 1 / -1; }
details.w8-grp { padding: 8px 12px; } details.w8-grp summary { cursor: pointer; font-size: 13.5px; font-weight: 700; color: #2b3350; }
details.w8-grp[open] summary { margin-bottom: 8px; }
.w8-taskbtns { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--nx-line); }
.w8-taskbtns #tkNext, .w8-taskbtns #tkDone { margin-left: auto; }
.w8-resettask { order: 3; flex-basis: 100%; text-align: left; background: none; border: 0; font-size: 12.5px; color: var(--nx-dim); cursor: pointer; padding: 0; }
.w8-resettask:hover { color: #d62c7e; }
/* 程式碼對照 */
.w8-peek { border-top: 1px solid #1b2033; background: #0b0d14; }
.w8-peek .hd { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; padding: 10px 14px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); }
.w8-peek .hd b { color: #fff; font-size: 13.5px; display: flex; gap: 6px; } .w8-peek .hd b i { color: #c6ff3d; }
.w8-peek .hd span { font-size: 12px; color: #8d96ad; }
.w8-peek .hd button { margin-left: auto; font-family: var(--nx-mono); font-size: 11.5px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.w8-peek .hd button:hover { background: #c6ff3d; color: #06070b; }
.w8-peek pre { margin: 0; padding: 14px 16px; max-height: 340px; overflow: auto; color: #c3cbe0; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.75; white-space: pre; }
.w8-peek mark, .w8-peek .hd mark { background: #ffe066; color: #1a1400; border-radius: 3px; padding: 0 2px; }
.w8-peek mark.k, .w8-peek .hd mark.k { background: #c6ff3d; }
/* 程式碼模式 */
.w8-ws.is-code .w8-ws-left { max-height: none; }
#codePane { display: flex; flex-direction: column; height: 100%; background: #0b0d14; }
#codePane[hidden] { display: none; }
.w8-codehead { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0f121b; }
.w8-codehead .grp { display: flex; gap: 6px; flex-wrap: wrap; }
.w8-codehead .act { font-family: var(--nx-mono); font-size: 12px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); padding: 6px 11px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.w8-codehead .act:hover { background: #c6ff3d; color: #06070b; }
#codePane .w8-quick { padding: 6px 12px; margin: 0; background: #0f121b; color: #8d96ad; }
#codePane .w8-quick button { background: transparent; color: #c3cbe0; border-color: rgba(160, 180, 255, .25); }
#codePane textarea { flex: 1; width: 100%; min-height: 620px; resize: vertical; border: 0; outline: 0; background: #0b0d14; color: #e8ecf6; font-family: var(--nx-mono); font-size: 13px; line-height: 1.75; padding: 14px 16px; tab-size: 2; white-space: pre; overflow: auto; }
#codePane .w8-edhelp { margin: 0; padding: 8px 14px; font-size: 12.5px; color: #8d96ad; background: #0f121b; }
.w8-ws-right .w8-preview { overflow: hidden; position: relative; }
.w8-ws-right .w8-preview iframe { max-width: none; transition: none; border-radius: 6px; }

/* ===== 範例一 版面修正：固定高度、任務選單兩排、預覽不撐高 ===== */
.w8-ws-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; }
@media (max-width: 760px) { .w8-ws-top { grid-template-columns: minmax(0, 1fr); } }
.w8-tasknav { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; overflow: visible; }
@media (max-width: 600px) { .w8-tasknav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w8-tasknav button { width: 100%; min-width: 0; justify-content: flex-start; padding: 6px 10px 6px 6px; }
.w8-tasknav button span { overflow: hidden; text-overflow: ellipsis; }
.w8-mode { flex-direction: column; } .w8-mode button { justify-content: center; }
@media (max-width: 760px) { .w8-mode { flex-direction: row; } }
.w8-ws-grid { height: 700px; }
.w8-ws-left { max-height: none; height: 100%; overflow-y: auto; overscroll-behavior: contain; }
.w8-ws-right { min-height: 0; height: 100%; }
.w8-ws-right .w8-preview { flex: 1; min-height: 0; padding: 0; position: relative; overflow: hidden; background: #e9ecf3; }
.w8-ws-right .w8-preview iframe { position: absolute; top: 0; left: 0; transform-origin: 0 0; margin: 0; border-radius: 0; height: 100%; }
@media (max-width: 1100px) {
  .w8-ws-grid { height: auto; }
  .w8-ws-left { height: auto; overflow: visible; }
  .w8-ws-right { height: 560px; }
}
.w8-ws.is-code .w8-ws-left { overflow: hidden; }
#codePane textarea { min-height: 0; }
/* 任務 5：不同螢幕的欄數 */
#miniGrid { display: grid; gap: 6px; padding: 10px 12px; border-radius: 10px; background: #f4f6fb; }
#miniGrid .w8-gr { grid-template-columns: 40px minmax(0, 1fr) 84px; }
#miniGrid .w8-gr code { font-size: 11.5px !important; text-align: right; }
#miniGrid .w8-gr div { display: grid; gap: 3px; }
/* 任務 8：對比檢查 */
.w8-ctr { display: grid; gap: 5px; }
.w8-ctr > div { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 13px; padding: 5px 8px; border-radius: 9px; }
.w8-ctr .sw { text-align: center; border-radius: 6px; font-weight: 900; padding: 3px 0; border: 1px solid rgba(0, 0, 0, .1); }
.w8-ctr b { font-weight: 500; color: #2b3350; } .w8-ctr em { font-style: normal; font-family: var(--nx-mono); font-size: 12px; }
.w8-ctr .ok { background: #f4f9ea; } .w8-ctr .ok em { color: #2f6300; }
.w8-ctr .bad { background: #fde5ef; } .w8-ctr .bad em { color: #b0235f; }

/* ===== 範例二：在真的範本上即時修改 ===== */
.w8-live { display: grid; grid-template-columns: minmax(280px, .8fr) minmax(0, 1.4fr); height: 640px; border: 1px solid var(--nx-line); border-radius: 18px; overflow: hidden; background: #fff; box-shadow: 0 24px 50px -30px rgba(20, 30, 80, .5); }
@media (max-width: 1000px) { .w8-live { grid-template-columns: minmax(0, 1fr); height: auto; } .w8-live-right { height: 520px; } }
.w8-live-ctrl { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--nx-line); }
.w8-livetabs { padding: 10px; background: #f4f6fb; border-bottom: 1px solid var(--nx-line); flex-wrap: wrap; }
.w8-livetabs button { font-size: 12.5px; padding: 7px 6px; }
.w8-livepanel { flex: 1; overflow-y: auto; padding: 14px 16px; overscroll-behavior: contain; }
.w8-live-right { display: flex; flex-direction: column; min-height: 0; background: #e9ecf3; }
.w8-live-right .w8-preview { flex: 1; min-height: 0; padding: 0; position: relative; overflow: hidden; }
.w8-live-right .w8-preview iframe { position: absolute; top: 0; left: 0; transform-origin: 0 0; border: 0; background: #fff; max-width: none; }
.w8-pvbar .grp { display: flex; gap: 6px; }
.w8-pvbtn { font-family: var(--nx-mono); font-size: 11.5px; color: #c3cbe0 !important; background: transparent; border: 1px solid rgba(160, 180, 255, .2); border-radius: 7px; padding: 4px 10px; cursor: pointer; text-decoration: none !important; display: inline-flex; gap: 4px; align-items: center; }
.w8-pvbtn:hover { background: #c6ff3d; color: #06070b !important; }
.w8-fonts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.w8-fonts button { padding: 8px; border-radius: 9px; border: 1.5px solid var(--nx-line); background: #fff; font-size: 16px; font-weight: 700; cursor: pointer; }
.w8-fonts button[aria-pressed="true"] { border-color: #0b0d14; background: #0b0d14; color: #c6ff3d; }
.w8-navin { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.w8-navin .wu-input { font-family: var(--nx-sans); font-size: 14px; padding: 7px 10px; }
.w8-blocks { display: grid; gap: 6px; }
.w8-blocks label { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--nx-line); border-radius: 10px; cursor: pointer; font-size: 14px; }
.w8-blocks input { width: 18px; height: 18px; accent-color: #3d7a00; }
.w8-blocks label:has(input:not(:checked)) { background: #f6f6f8; color: var(--nx-faint); text-decoration: line-through; }
.w8-blocks code { font-size: 11.5px !important; }
.w8-range { width: 100%; accent-color: #3d7a00; }
.w8-livecode { margin: 12px 0 24px; border-radius: 16px; overflow: hidden; background: #0b0d14; }
.w8-livecode .hd { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 10px 14px; background: #0f121b; }
.w8-livecode .hd b { color: #fff; font-size: 14px; display: flex; gap: 6px; } .w8-livecode .hd b i { color: #c6ff3d; }
.w8-livecode .hd span { font-size: 12.5px; color: #8d96ad; }
.w8-livecode .hd button { margin-left: auto; font-family: var(--nx-mono); font-size: 11.5px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); border-radius: 6px; padding: 3px 10px; cursor: pointer; }
.w8-livecode .hd button:hover { background: #c6ff3d; color: #06070b; }
.w8-livecode ol { margin: 0; padding: 10px 14px 14px 34px; color: #c3cbe0; display: grid; gap: 10px; }
.w8-livecode li b { color: #c6ff3d; font-family: var(--nx-mono); font-size: 13px; margin-right: 8px; }
.w8-livecode li span { font-size: 13px; }
.w8-livecode pre { margin: 6px 0 0; padding: 10px 12px; border-radius: 8px; background: rgba(255, 255, 255, .05); color: #ffe066; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }