/* =========================================================
   網頁設計（基礎）單元頁 ｜ NEO-CODE 單元版面（前綴 wu-）
   需搭配 web-neo.css（變數、頁首、頁尾、按鈕）一起載入
   ========================================================= */
body.unit-page { background: var(--nx-bg); color: var(--nx-ink); font-family: var(--nx-sans); -webkit-font-smoothing: antialiased; }
body.unit-page ::selection { background: var(--nx-lime); color: #06070b; }
body.unit-page a { color: var(--nx-cyan); text-decoration-color: rgba(61, 240, 255, .35); text-underline-offset: 3px; }
body.unit-page a:hover { color: var(--nx-lime); }
body.unit-page .nx-btn, body.unit-page .nx-btn:hover { text-decoration: none; }
body.unit-page .nx-btn { color: #06070b; } body.unit-page .nx-btn.ghost { color: var(--nx-ink); } body.unit-page .nx-btn.ghost:hover { color: var(--nx-lime); }

/* ---------- Hero ---------- */
.wu-hero { position: relative; overflow: hidden; padding: 128px 0 54px; background:
  radial-gradient(800px 420px at 90% -20%, rgba(77, 124, 255, .3), transparent 60%),
  radial-gradient(600px 360px at 0% 100%, rgba(198, 255, 61, .08), transparent 60%), var(--nx-bg);
  border-bottom: 1px solid var(--nx-line); }
.wu-hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--nx-line) 1px, transparent 1px), linear-gradient(90deg, var(--nx-line) 1px, transparent 1px); background-size: 52px 52px; mask-image: radial-gradient(ellipse at 70% 0%, #000 10%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 70% 0%, #000 10%, transparent 70%); opacity: .5; }
.wu-hero .nx-wrap { position: relative; z-index: 1; }
.wu-crumb { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-faint); margin-bottom: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.wu-crumb a { color: var(--nx-dim) !important; text-decoration: none !important; } .wu-crumb a:hover { color: var(--nx-lime) !important; }
.wu-crumb b { color: var(--nx-lime); font-weight: 500; }
.wu-unit-no { font-family: var(--nx-display); font-weight: 700; font-size: clamp(80px, 14vw, 170px); line-height: .8; letter-spacing: -.06em; color: transparent; -webkit-text-stroke: 1px rgba(198, 255, 61, .45); position: absolute; right: 0; top: -6px; pointer-events: none; user-select: none; }
.wu-hero h1 { font-family: var(--nx-display); font-weight: 700; font-size: clamp(32px, 5.6vw, 62px); line-height: 1.12; letter-spacing: -.03em; color: #fff; margin: 0 0 16px; max-width: 800px; position: relative; }
.wu-hero h1 em { font-style: normal; color: var(--nx-lime); }
.wu-hero .lead { color: var(--nx-dim); font-size: 18px; line-height: 1.9; max-width: 700px; margin: 0 0 24px; }
.wu-hero .lead strong { color: #fff; }
.wu-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wu-chips span { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-dim); border: 1px solid var(--nx-line); border-radius: 999px; padding: 5px 13px; background: rgba(255, 255, 255, .03); display: inline-flex; gap: 7px; align-items: center; }
.wu-chips span i { color: var(--nx-lime); }

/* ---------- 版面：左側目錄＋內容 ---------- */
.wu-layout { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: 56px; padding: 56px 0 40px; align-items: start; }
@media (max-width: 1000px) { .wu-layout { grid-template-columns: 1fr; gap: 0; padding-top: 0; } }
.wu-rail { position: sticky; top: 96px; }
.wu-rail h4 { font-family: var(--nx-mono); font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--nx-faint); margin: 0 0 14px; font-weight: 500; }
.wu-rail ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--nx-line); }
.wu-rail a { display: flex; gap: 10px; padding: 7px 0 7px 16px; margin-left: -1px; border-left: 2px solid transparent; font-size: 14px; line-height: 1.5; color: var(--nx-dim) !important; text-decoration: none !important; transition: all .2s; }
.wu-rail a .n { font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); padding-top: 2px; }
.wu-rail a:hover { color: #fff !important; }
.wu-rail a.on { color: var(--nx-lime) !important; border-left-color: var(--nx-lime); background: linear-gradient(90deg, rgba(198, 255, 61, .08), transparent); }
.wu-rail .pg { margin-top: 22px; font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-faint); }
.wu-rail .pg i { display: block; height: 3px; border-radius: 3px; background: var(--nx-line); margin-top: 8px; overflow: hidden; } .wu-rail .pg i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nx-blue), var(--nx-lime)); }
@media (max-width: 1000px) {
  .wu-rail { position: sticky; top: 64px; z-index: 50; margin: 0 -20px; padding: 10px 20px; background: rgba(6, 7, 11, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--nx-line); overflow-x: auto; }
  .wu-rail h4, .wu-rail .pg { display: none; }
  .wu-rail ol { display: flex; gap: 6px; border: 0; width: max-content; }
  .wu-rail a { border: 1px solid var(--nx-line); border-radius: 999px; padding: 6px 13px; margin: 0; white-space: nowrap; font-size: 13px; }
  .wu-rail a.on { border-color: var(--nx-lime); }
  .wu-rail a .n { display: none; }
}

/* ---------- 內文 ---------- */
.wu-main { min-width: 0; max-width: 860px; }
.wu-sec { overflow: visible !important; padding-top: 12px; margin-bottom: 76px; scroll-margin-top: 90px; }
.wu-sec > h2 { font-family: var(--nx-display); font-size: clamp(25px, 3.4vw, 36px); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; color: #fff; margin: 0 0 8px; display: flex; gap: 14px; align-items: baseline; }
.wu-sec > h2 .no { font-family: var(--nx-mono); font-size: 14px; font-weight: 500; color: var(--nx-lime); letter-spacing: .06em; flex: none; }
.wu-sec > .sub { color: var(--nx-dim); font-size: 16.5px; line-height: 1.85; margin: 0 0 26px; }
.wu-main h3 { font-family: var(--nx-display); font-size: 21px; font-weight: 700; color: #fff; margin: 34px 0 12px; line-height: 1.4; display: flex; align-items: center; gap: 10px; }
.wu-main h3 i { color: var(--nx-lime); font-size: 19px; }
.wu-main p { font-size: 16.5px; line-height: 1.95; color: #c3cbe0; margin: 0 0 14px; }
.wu-main p strong, .wu-main li strong { color: #fff; font-weight: 700; }
.wu-main ul.wu-list, .wu-main ol.wu-list { padding-left: 22px; color: #c3cbe0; line-height: 1.9; font-size: 16px; margin: 0 0 16px; }
.wu-main .wu-list li { margin-bottom: 6px; } .wu-main ul.wu-list li::marker { color: var(--nx-lime); }
.wu-main code:not(pre code) { font-family: var(--nx-mono); font-size: .88em; color: var(--nx-lime); background: rgba(198, 255, 61, .08); border: 1px solid rgba(198, 255, 61, .2); padding: 1px 7px; border-radius: 6px; }
.wu-main img.wu-img { max-width: 100%; border-radius: 12px; border: 1px solid var(--nx-line); display: block; margin: 12px 0; }
.wu-fig { margin: 16px 0 22px; } .wu-fig figcaption { font-size: 13px; color: var(--nx-faint); font-family: var(--nx-mono); margin-top: 6px; }
.wu-fig img { max-width: 100%; border-radius: 12px; border: 1px solid var(--nx-line); }
.wu-grid2, .wu-grid3 { display: grid; gap: 14px; margin: 18px 0 22px; }
.wu-grid2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wu-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 760px) { .wu-grid2, .wu-grid3 { grid-template-columns: 1fr; } }
.wu-card { border: 1px solid var(--nx-line); border-radius: 16px; background: var(--nx-bg2); padding: 20px 22px; transition: border-color .25s, transform .25s var(--nx-ease); position: relative; }
.wu-card:hover { border-color: rgba(198, 255, 61, .45); transform: translateY(-3px); }
.wu-card .ico { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 21px; margin-bottom: 12px; color: var(--nx-lime); background: rgba(198, 255, 61, .08); border: 1px solid rgba(198, 255, 61, .25); }
.wu-card h4 { font-family: var(--nx-display); font-size: 18px; color: #fff; margin: 0 0 6px; font-weight: 700; }
.wu-card p { font-size: 14.5px; line-height: 1.8; margin: 0; color: var(--nx-dim); }
.wu-card.c-html .ico { color: #ff7a45; background: rgba(255, 122, 69, .1); border-color: rgba(255, 122, 69, .3); }
.wu-card.c-css .ico { color: var(--nx-blue); background: rgba(77, 124, 255, .12); border-color: rgba(77, 124, 255, .35); }
.wu-card.c-js .ico { color: #ffd23d; background: rgba(255, 210, 61, .1); border-color: rgba(255, 210, 61, .3); }

/* 標註框 */
.wu-call { display: flex; gap: 14px; border-radius: 14px; padding: 16px 20px; margin: 20px 0; border: 1px solid var(--nx-line); background: var(--nx-bg2); }
.wu-call > i { font-size: 22px; flex: none; margin-top: 2px; }
.wu-call b { display: block; color: #fff; margin-bottom: 3px; font-family: var(--nx-display); font-size: 16px; }
.wu-call p, .wu-call div > span { font-size: 15px !important; line-height: 1.8 !important; margin: 0 !important; color: var(--nx-dim) !important; }
.wu-call.new { border-color: rgba(198, 255, 61, .4); background: linear-gradient(120deg, rgba(198, 255, 61, .09), transparent 70%); } .wu-call.new > i { color: var(--nx-lime); }
.wu-call.tip { border-color: rgba(61, 240, 255, .35); background: linear-gradient(120deg, rgba(61, 240, 255, .07), transparent 70%); } .wu-call.tip > i { color: var(--nx-cyan); }
.wu-call.warn { border-color: rgba(255, 79, 163, .4); background: linear-gradient(120deg, rgba(255, 79, 163, .08), transparent 70%); } .wu-call.warn > i { color: var(--nx-pink); }
.wu-badge { font-family: var(--nx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .06em; padding: 2px 8px; border-radius: 5px; vertical-align: 2px; margin-left: 6px; white-space: nowrap; }
.wu-badge.new { background: var(--nx-lime); color: #06070b; } .wu-badge.old { background: rgba(255, 255, 255, .1); color: var(--nx-dim); } .wu-badge.rec { background: rgba(61, 240, 255, .15); color: var(--nx-cyan); border: 1px solid rgba(61, 240, 255, .4); }

/* 程式碼 */
.wu-code { border: 1px solid var(--nx-line); border-radius: 14px; overflow: hidden; margin: 16px 0 22px; background: #06070b; }
.wu-code-bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; background: rgba(255, 255, 255, .03); border-bottom: 1px solid var(--nx-line); font-family: var(--nx-mono); font-size: 12px; color: var(--nx-faint); }
.wu-code-bar button { font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-dim); background: transparent; border: 1px solid var(--nx-line); border-radius: 6px; padding: 3px 10px; cursor: pointer; transition: all .2s; }
.wu-code-bar button:hover { color: #06070b; background: var(--nx-lime); border-color: var(--nx-lime); }
.wu-code pre { margin: 0; padding: 16px 18px; overflow-x: auto; font-family: var(--nx-mono); font-size: 13.5px; line-height: 1.8; color: #c3cbe0; tab-size: 2; }
.wu-code pre .t { color: #ff7ab2; } .wu-code pre .a { color: var(--nx-cyan); } .wu-code pre .s { color: var(--nx-lime); } .wu-code pre .p { color: #82a8ff; } .wu-code pre .c { color: var(--nx-faint); }

/* 步驟 */
.wu-steps { list-style: none; counter-reset: st; padding: 0; margin: 18px 0 22px; display: grid; gap: 12px; }
.wu-steps > li { counter-increment: st; position: relative; padding: 16px 18px 16px 62px; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-bg2); font-size: 15.5px; line-height: 1.85; color: #c3cbe0; }
.wu-steps > li::before { content: counter(st); position: absolute; left: 16px; top: 15px; width: 32px; height: 32px; border-radius: 10px; display: grid; place-items: center; font-family: var(--nx-mono); font-weight: 700; color: #06070b; background: var(--nx-lime); }
.wu-steps > li b { color: #fff; display: block; font-family: var(--nx-display); font-size: 16.5px; }

/* 時間軸／流程 */
.wu-flow { position: relative; margin: 22px 0 26px 14px; padding-left: 30px; border-left: 2px solid var(--nx-line); display: grid; gap: 14px; }
.wu-flow > div { position: relative; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-bg2); padding: 16px 20px; }
.wu-flow > div::before { content: ""; position: absolute; left: -39px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--nx-bg); border: 3px solid var(--nx-lime); box-shadow: 0 0 12px rgba(198, 255, 61, .6); }
.wu-flow .ph { font-family: var(--nx-mono); font-size: 11.5px; letter-spacing: .1em; color: var(--nx-lime); }
.wu-flow h4 { font-family: var(--nx-display); font-size: 18px; color: #fff; margin: 4px 0 6px; }
.wu-flow p, .wu-flow ul { font-size: 14.5px !important; line-height: 1.8 !important; color: var(--nx-dim) !important; margin: 0 !important; }
.wu-flow ul { padding-left: 18px; }
.wu-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.wu-tags span, .wu-tags a { font-family: var(--nx-mono); font-size: 11.5px; padding: 3px 10px; border-radius: 6px; border: 1px solid var(--nx-line); color: var(--nx-dim); text-decoration: none !important; }
.wu-tags a { color: var(--nx-cyan); border-color: rgba(61, 240, 255, .3); } .wu-tags a:hover { background: rgba(61, 240, 255, .1); }

/* 表格 */
.wu-tablewrap { overflow-x: auto; border: 1px solid var(--nx-line); border-radius: 14px; margin: 18px 0 22px; background: var(--nx-bg2); }
.wu-table { width: 100%; border-collapse: collapse; font-size: 14.5px; min-width: 620px; }
.wu-table th { font-family: var(--nx-mono); font-size: 12px; letter-spacing: .06em; text-align: left; padding: 13px 16px; color: var(--nx-lime); background: rgba(198, 255, 61, .06); border-bottom: 1px solid var(--nx-line); white-space: nowrap; font-weight: 600; }
.wu-table td { padding: 13px 16px; border-bottom: 1px solid var(--nx-line); vertical-align: top; line-height: 1.75; color: #c3cbe0; }
.wu-table tr:last-child td { border-bottom: 0; }
.wu-table td:first-child { color: #fff; font-weight: 700; white-space: nowrap; background: rgba(255, 255, 255, .02); }
.wu-table tr:hover td { background: rgba(255, 255, 255, .03); }
.wu-table small { color: var(--nx-faint); }

/* 分頁籤 */
.wu-tabs { margin: 18px 0 24px; }
.wu-tablist { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.wu-tablist button { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); background: transparent; border: 1px solid var(--nx-line); border-radius: 8px; padding: 8px 14px; cursor: pointer; transition: all .2s; }
.wu-tablist button:hover { color: #fff; border-color: rgba(255, 255, 255, .3); }
.wu-tablist button[aria-selected="true"] { background: var(--nx-lime); border-color: var(--nx-lime); color: #06070b; font-weight: 600; }
.wu-tabpanel[hidden] { display: none; }
.wu-links { display: grid; gap: 10px; }
.wu-link { display: flex; gap: 14px; align-items: flex-start; padding: 14px 18px; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-bg2); text-decoration: none !important; color: inherit !important; transition: all .2s var(--nx-ease); }
.wu-link:hover { border-color: var(--nx-lime); transform: translateX(4px); }
.wu-link .ic { width: 38px; height: 38px; flex: none; border-radius: 10px; display: grid; place-items: center; background: rgba(77, 124, 255, .14); color: #8fb0ff; font-size: 18px; }
.wu-link b { display: block; color: #fff; font-size: 15.5px; font-family: var(--nx-display); } .wu-link b em { font-style: normal; font-family: var(--nx-mono); font-weight: 400; font-size: 11.5px; color: var(--nx-faint); margin-left: 6px; }
.wu-link span { display: block; font-size: 13.8px; color: var(--nx-dim); line-height: 1.7; margin-top: 2px; }
.wu-link .go { margin-left: auto; color: var(--nx-faint); font-family: var(--nx-mono); flex: none; }
.wu-link:hover .go { color: var(--nx-lime); }
details.wu-more { border: 1px dashed var(--nx-line); border-radius: 12px; padding: 12px 18px; margin: 16px 0; color: var(--nx-dim); }
details.wu-more summary { cursor: pointer; font-family: var(--nx-mono); font-size: 13px; color: var(--nx-dim); }
details.wu-more ul { margin: 12px 0 0; padding-left: 20px; line-height: 1.9; font-size: 14.5px; }

/* 檢核清單 */
.wu-check { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 8px; }
.wu-check label { display: flex; gap: 14px; align-items: flex-start; padding: 13px 16px; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-bg2); cursor: pointer; font-size: 15.5px; line-height: 1.7; color: #c3cbe0; transition: all .2s; }
.wu-check label:hover { border-color: rgba(198, 255, 61, .4); }
.wu-check input { appearance: none; -webkit-appearance: none; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--nx-faint); flex: none; margin-top: 2px; display: grid; place-items: center; cursor: pointer; transition: all .2s; }
.wu-check input:checked { background: var(--nx-lime); border-color: var(--nx-lime); }
.wu-check input:checked::after { content: "✓"; color: #06070b; font-weight: 900; font-size: 14px; }
.wu-check input:checked + span { color: var(--nx-faint); text-decoration: line-through; text-decoration-color: rgba(255, 255, 255, .3); }
.wu-checkbar { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.wu-checkbar i { flex: 1; height: 5px; border-radius: 5px; background: var(--nx-line); overflow: hidden; } .wu-checkbar i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--nx-blue), var(--nx-lime)); transition: width .4s var(--nx-ease); }

/* 小測驗 */
.wu-quiz { border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-bg2); padding: 22px 24px; margin: 18px 0; }
.wu-q + .wu-q { margin-top: 24px; padding-top: 22px; border-top: 1px dashed var(--nx-line); }
.wu-q > b { display: block; color: #fff; font-size: 16.5px; margin-bottom: 12px; line-height: 1.6; }
.wu-q > b span { font-family: var(--nx-mono); color: var(--nx-lime); margin-right: 8px; }
.wu-q button { display: block; width: 100%; text-align: left; font-family: inherit; font-size: 15px; padding: 10px 14px; margin-bottom: 8px; border-radius: 10px; border: 1px solid var(--nx-line); background: transparent; color: #c3cbe0; cursor: pointer; transition: all .2s; }
.wu-q button:hover:not(:disabled) { border-color: var(--nx-cyan); }
.wu-q button.ok { border-color: var(--nx-lime); background: rgba(198, 255, 61, .1); color: #fff; }
.wu-q button.bad { border-color: var(--nx-pink); background: rgba(255, 79, 163, .08); }
.wu-q .fb { font-size: 14px; color: var(--nx-dim); margin: 6px 0 0; min-height: 0; line-height: 1.7; }
.wu-score { font-family: var(--nx-mono); font-size: 13px; color: var(--nx-lime); margin-top: 16px; }

/* 互動示範區 */
.wu-demo { border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-bg2); padding: 20px; margin: 18px 0 24px; }
.wu-demo-top { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; align-items: center; font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); }
.wu-demo-top label { display: inline-flex; gap: 8px; align-items: center; padding: 7px 13px; border: 1px solid var(--nx-line); border-radius: 8px; cursor: pointer; transition: all .2s; }
.wu-demo-top label:has(input:checked) { border-color: var(--nx-lime); color: var(--nx-lime); background: rgba(198, 255, 61, .07); }
.wu-demo-top input { accent-color: var(--nx-lime); }
.wu-page { border-radius: 12px; background: #fff; color: #111; padding: 22px; min-height: 190px; font-family: "Times New Roman", "Noto Serif TC", serif; transition: all .4s var(--nx-ease); }
.wu-page h5 { font-size: 24px; margin: 0 0 8px; font-weight: 700; color: #111; font-family: inherit; transition: all .4s; }
.wu-page p { font-size: 15px !important; line-height: 1.7 !important; color: #222 !important; margin: 0 0 10px !important; }
.wu-page a.btn { display: inline-block; font-size: 15px; color: #00e !important; text-decoration: underline !important; cursor: pointer; transition: all .4s; }
.wu-page .cnt { display: none; margin-top: 10px; font-family: var(--nx-mono); font-size: 13px; }
.wu-page.css { background: linear-gradient(135deg, #0b0d14, #1b2a6b); color: #fff; font-family: var(--nx-sans); border-radius: 18px; }
.wu-page.css h5 { color: var(--nx-lime); font-family: var(--nx-display); font-size: 30px; letter-spacing: -.02em; }
.wu-page.css p { color: #c3cbe0 !important; }
.wu-page.css a.btn { background: var(--nx-lime); color: #06070b !important; text-decoration: none !important; padding: 9px 20px; border-radius: 999px; font-weight: 700; font-family: var(--nx-mono); font-size: 14px; }
.wu-page.js .cnt { display: block; color: var(--nx-lime); }
.wu-page:not(.css).js .cnt { color: #0a7; }

/* 網址解剖 */
.wu-url { display: flex; flex-wrap: wrap; font-family: var(--nx-mono); font-size: clamp(14px, 2.4vw, 20px); border: 1px solid var(--nx-line); border-radius: 14px; background: #06070b; padding: 18px 20px; gap: 0; margin: 16px 0 6px; }
.wu-url button { font: inherit; background: none; border: 0; color: #c3cbe0; padding: 4px 2px; border-bottom: 2px solid transparent; cursor: pointer; }
.wu-url button:hover, .wu-url button.on { color: #06070b; background: var(--nx-lime); border-radius: 4px; }
.wu-urlnote { font-size: 14.5px; color: var(--nx-dim); border-left: 3px solid var(--nx-lime); padding: 8px 14px; margin: 8px 0 18px; background: rgba(198, 255, 61, .05); border-radius: 0 10px 10px 0; line-height: 1.8; }

/* 上一頁／下一頁 */
.wu-pager { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 40px 0 60px; }
@media (max-width: 640px) { .wu-pager { grid-template-columns: 1fr; } }
.wu-pager a { border: 1px solid var(--nx-line); border-radius: 16px; padding: 20px 22px; text-decoration: none !important; background: var(--nx-bg2); display: block; color: inherit !important; transition: all .25s var(--nx-ease); }
.wu-pager a:hover { border-color: var(--nx-lime); transform: translateY(-3px); }
.wu-pager small { font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-lime); letter-spacing: .1em; }
.wu-pager b { display: block; font-family: var(--nx-display); font-size: 18px; color: #fff; margin-top: 6px; }
.wu-pager a.next { text-align: right; }

.wu-toplink { font-family: var(--nx-mono); }
.wu-reveal { opacity: 0; transform: translateY(20px); transition: opacity .6s var(--nx-ease), transform .6s var(--nx-ease); }
.wu-reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .wu-reveal { opacity: 1; transform: none; } }

/* =========================================================
   UNIT 01 擴充：白底閱讀版（.wu-light）＋互動元件
   ========================================================= */
.wu-body.wu-light {
  --nx-bg: #f4f6fb; --nx-bg2: #ffffff; --nx-line: rgba(18, 28, 64, .13); --nx-ink: #141a2e; --nx-dim: #57617c; --nx-faint: #8089a1;
  --nx-lime: #3d7a00; --nx-cyan: #0b6da8; --nx-blue: #3a63e0; --nx-pink: #d62c7e;
  background: #f4f6fb; color: #141a2e; border-bottom: 1px solid var(--nx-line);
}
.wu-light .wu-sec > h2, .wu-light .wu-main h3, .wu-light .wu-card h4, .wu-light .wu-call b, .wu-light .wu-flow h4, .wu-light .wu-link b, .wu-light .wu-q > b, .wu-light .wu-steps > li b, .wu-light .wu-pager b, .wu-light .wu-main p strong, .wu-light .wu-main li strong, .wu-light .wu-table td:first-child, .wu-light .wu-table strong { color: #0b1020; }
.wu-light .wu-main p, .wu-light .wu-main ul.wu-list, .wu-light .wu-main ol.wu-list, .wu-light .wu-table td, .wu-light .wu-steps > li, .wu-light .wu-check label, .wu-light .wu-q button { color: #2b3350; }
.wu-light .wu-sec > .sub, .wu-light .wu-card p, .wu-light .wu-link span, .wu-light .wu-call span, .wu-light .wu-flow p, .wu-light .wu-flow ul { color: var(--nx-dim) !important; }
.wu-light .wu-card, .wu-light .wu-call, .wu-light .wu-flow > div, .wu-light .wu-link, .wu-light .wu-steps > li, .wu-light .wu-check label, .wu-light .wu-tablewrap, .wu-light .wu-pager a, .wu-light .wu-quiz, .wu-light .wu-demo { background: #fff; box-shadow: 0 10px 26px -18px rgba(20, 30, 80, .35); }
.wu-light .wu-call.new { background: linear-gradient(120deg, rgba(120, 190, 0, .12), #fff 70%); border-color: rgba(61, 122, 0, .4); }
.wu-light .wu-call.tip { background: linear-gradient(120deg, rgba(11, 109, 168, .09), #fff 70%); border-color: rgba(11, 109, 168, .35); }
.wu-light .wu-call.warn { background: linear-gradient(120deg, rgba(214, 44, 126, .08), #fff 70%); border-color: rgba(214, 44, 126, .35); }
.wu-light .wu-table th { background: #eef3e4; color: #3d7a00; }
.wu-light .wu-table td:first-child { background: #f8f9fc; }
.wu-light .wu-table tr:hover td { background: #f5f8ff; }
.wu-light .wu-main code:not(pre code) { color: #2f6300; background: #eef6dc; border-color: #cfe4a5; }
.wu-light .wu-card .ico { color: #3d7a00; background: #eef6dc; border-color: #cfe4a5; }
.wu-light .wu-card.c-html .ico { color: #d9480f; background: #fff0e6; border-color: #ffd2b8; }
.wu-light .wu-card.c-css .ico { color: #2f55d4; background: #e9eeff; border-color: #c5d2ff; }
.wu-light .wu-card.c-js .ico { color: #b27b00; background: #fff6d8; border-color: #f3dc8a; }
.wu-light .wu-link .ic { background: #e9eeff; color: #2f55d4; }
.wu-light .wu-link:hover { box-shadow: 0 14px 30px -16px rgba(61, 122, 0, .5); }
.wu-light .wu-flow > div::before { background: #f4f6fb; box-shadow: 0 0 0 4px rgba(61, 122, 0, .15); }
.wu-light .wu-steps > li::before, .wu-light .wu-badge.new { color: #fff; background: #3d7a00; }
.wu-light .wu-badge.old { background: #e8ebf3; color: #57617c; } .wu-light .wu-badge.rec { background: #e3f1fb; color: #0b6da8; border-color: #b6d8ee; }
.wu-light .wu-tablist button[aria-selected="true"], .wu-light .wu-filter button[aria-pressed="true"], .wu-light .wu-os button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-light .wu-check input:checked { background: #3d7a00; border-color: #3d7a00; } .wu-light .wu-check input:checked::after { color: #fff; }
.wu-light .wu-q button.ok { background: #e7f5d3; color: #0b1020; } .wu-light .wu-q button.bad { background: #fde5ef; }
.wu-light .wu-hero + .wu-body .x { }
.wu-light .nx-btn { background: #0b0d14; border-color: #0b0d14; color: #c6ff3d; }
.wu-light .nx-btn:hover { background: #0b0d14; color: #c6ff3d; box-shadow: 0 0 0 4px rgba(61, 122, 0, .18), 0 14px 30px -10px rgba(11, 13, 20, .5); }
.wu-light .nx-btn.ghost { background: transparent; color: #141a2e; border-color: var(--nx-line); } .wu-light .nx-btn.ghost:hover { color: #3d7a00; border-color: #3d7a00; box-shadow: none; }
body.unit-page .wu-light .nx-btn { color: #c6ff3d; } body.unit-page .wu-light .nx-btn.ghost { color: #141a2e; }
.wu-light .wu-rail a { color: var(--nx-dim) !important; } .wu-light .wu-rail a:hover { color: #0b1020 !important; }
.wu-light .wu-rail a.on { color: #2f6300 !important; background: linear-gradient(90deg, rgba(61, 122, 0, .12), transparent); }
.wu-light .wu-rail h4 { color: var(--nx-faint); }
@media (max-width: 1000px) { .wu-light .wu-rail { background: rgba(244, 246, 251, .95); } }
.wu-light .wu-code { --nx-lime: #c6ff3d; --nx-faint: #5b6378; --nx-cyan: #3df0ff; box-shadow: 0 16px 34px -20px rgba(6, 7, 11, .6); border-color: #1b2033; }
.wu-light .wu-main a:not(.nx-btn):not(.wu-link) { color: #0b6da8; text-decoration-color: rgba(11, 109, 168, .35); } .wu-light .wu-main a:not(.nx-btn):not(.wu-link):hover { color: #3d7a00; }
.wu-light .wu-card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(120, 190, 0, .14), transparent 70%); }
.wu-light .wu-card:hover::after { opacity: 1; }
.wu-light .wu-main details.wu-more { background: #fff; }

/* 子元素依序進場 */
.wu-grid2 > *, .wu-grid3 > *, .wu-flow > *, .wu-steps > li { opacity: 0; transform: translateY(16px); transition: opacity .55s var(--nx-ease), transform .55s var(--nx-ease); }
.wu-reveal.in .wu-grid2 > *, .wu-reveal.in .wu-grid3 > *, .wu-reveal.in .wu-flow > *, .wu-reveal.in .wu-steps > li { opacity: 1; transform: none; }
.wu-reveal.in .wu-grid3 > *:nth-child(2), .wu-reveal.in .wu-grid2 > *:nth-child(2), .wu-reveal.in .wu-flow > *:nth-child(2), .wu-reveal.in .wu-steps > li:nth-child(2) { transition-delay: .08s; }
.wu-reveal.in .wu-grid3 > *:nth-child(3), .wu-reveal.in .wu-flow > *:nth-child(3), .wu-reveal.in .wu-steps > li:nth-child(3), .wu-reveal.in .wu-grid2 > *:nth-child(3) { transition-delay: .16s; }
.wu-reveal.in .wu-grid3 > *:nth-child(4), .wu-reveal.in .wu-flow > *:nth-child(4), .wu-reveal.in .wu-steps > li:nth-child(4), .wu-reveal.in .wu-grid2 > *:nth-child(4) { transition-delay: .24s; }
.wu-reveal.in .wu-grid3 > *:nth-child(n+5) { transition-delay: .32s; }
@media (prefers-reduced-motion: reduce) { .wu-grid2 > *, .wu-grid3 > *, .wu-flow > *, .wu-steps > li { opacity: 1; transform: none; } }

/* Hero 進度小標籤 */
.wu-prog-chip { font-family: var(--nx-mono); font-size: 12px; color: #06070b !important; background: var(--nx-lime); border-radius: 999px; padding: 5px 13px; text-decoration: none !important; display: inline-flex; gap: 7px; align-items: center; font-weight: 600; transition: transform .2s; }
.wu-prog-chip:hover { transform: translateY(-2px); color: #06070b !important; }

/* 作業系統切換＋快速鍵 */
.wu-os { display: inline-flex; gap: 6px; padding: 5px; border-radius: 12px; border: 1px solid var(--nx-line); background: var(--nx-bg2); margin: 0 0 20px; }
.wu-os button { font-family: var(--nx-mono); font-size: 13px; border: 0; background: transparent; color: var(--nx-dim); padding: 8px 16px; border-radius: 8px; cursor: pointer; transition: all .2s; display: inline-flex; gap: 8px; align-items: center; }
.wu-os button:hover { color: var(--nx-ink); }
.wu-os button[aria-pressed="true"] { background: var(--nx-lime); color: #06070b; font-weight: 600; }
body[data-os="win"] kbd[data-os="mac"], body[data-os="mac"] kbd[data-os="win"] { display: none; }
kbd[data-os] { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 5px; background: none; padding: 0; font-family: var(--nx-mono); color: inherit; }
kbd[data-os] span { display: inline-block; min-width: 30px; text-align: center; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--nx-line); border-bottom-width: 3px; background: var(--nx-bg2); font-size: 12.5px; font-weight: 600; color: var(--nx-ink); }

/* 擴充套件勾選卡 */
.wu-ext { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 14px 0 22px; }
@media (max-width: 760px) { .wu-ext { grid-template-columns: 1fr; } }
.wu-extcard { position: relative; text-align: left; font-family: inherit; border: 1px solid var(--nx-line); border-radius: 14px; background: var(--nx-bg2); padding: 16px 18px 16px 52px; cursor: pointer; transition: all .25s var(--nx-ease); }
.wu-extcard:hover { transform: translateY(-3px); border-color: var(--nx-lime); }
.wu-extcard b { display: block; font-family: var(--nx-display); font-size: 16px; color: var(--nx-ink); margin-bottom: 4px; }
.wu-extcard small { display: block; font-size: 13.5px; line-height: 1.7; color: var(--nx-dim); }
.wu-extcard .ck { position: absolute; left: 16px; top: 18px; width: 24px; height: 24px; border-radius: 8px; border: 2px solid var(--nx-faint); display: grid; place-items: center; transition: all .2s; }
.wu-extcard.on { border-color: var(--nx-lime); background: linear-gradient(120deg, rgba(120, 190, 0, .1), var(--nx-bg2) 70%); }
.wu-extcard.on .ck { background: var(--nx-lime); border-color: var(--nx-lime); } .wu-extcard.on .ck::after { content: "✓"; color: #fff; font-weight: 900; font-size: 14px; }

/* 能力雷達 */
.wu-radar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; border: 1px solid var(--nx-line); border-radius: 20px; background: var(--nx-bg2); padding: 22px; margin: 6px 0 14px; box-shadow: 0 14px 34px -22px rgba(20, 30, 80, .4); }
@media (max-width: 820px) { .wu-radar { grid-template-columns: 1fr; } }
.wu-radar-chart svg { width: 100%; max-width: 380px; display: block; margin: 0 auto; overflow: visible; }
.wu-radar-chart .ring { fill: none; stroke: var(--nx-line); } .wu-radar-chart .axis { stroke: var(--nx-line); }
.wu-radar-chart .me { fill: rgba(61, 122, 0, .22); stroke: #3d7a00; stroke-width: 2.5; stroke-linejoin: round; transition: all .3s; }
.wu-radar-chart .tg { fill: none; stroke: #3a63e0; stroke-width: 1.8; stroke-dasharray: 5 4; }
.wu-radar-chart circle { fill: #3d7a00; stroke: #fff; stroke-width: 2; transition: all .3s; }
.wu-radar-chart text { font-family: var(--nx-sans); font-size: 12.5px; fill: var(--nx-ink); font-weight: 700; }
.wu-legend { display: flex; justify-content: center; gap: 18px; font-family: var(--nx-mono); font-size: 12px; color: var(--nx-dim); margin-top: 6px; }
.wu-legend i { display: inline-block; width: 22px; height: 0; border-top: 3px solid #3d7a00; vertical-align: middle; margin-right: 6px; } .wu-legend i.tg { border-top: 2px dashed #3a63e0; }
.wu-radar-ctrl { display: grid; gap: 10px; }
.wu-radar-ctrl .row { display: grid; grid-template-columns: 112px minmax(0, 1fr) 22px; gap: 12px; align-items: center; font-size: 14.5px; color: var(--nx-ink); font-weight: 700; }
.wu-radar-ctrl .row b { font-family: var(--nx-mono); color: #3d7a00; text-align: right; }
.wu-radar-ctrl input[type=range], .wu-resbar + * input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #3a63e0, #3d7a00); outline: none; }
.wu-radar-ctrl input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 3px solid #3d7a00; cursor: grab; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
.wu-radar-ctrl input[type=range]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: #fff; border: 3px solid #3d7a00; cursor: grab; }
.wu-mini { justify-self: start; font-family: var(--nx-mono); font-size: 12px; border: 1px solid var(--nx-line); background: transparent; color: var(--nx-dim); border-radius: 8px; padding: 6px 12px; cursor: pointer; } .wu-mini:hover { color: #3d7a00; border-color: #3d7a00; }
.wu-radar-tip { display: flex; gap: 14px; align-items: flex-start; border: 1px dashed rgba(61, 122, 0, .5); border-radius: 14px; background: rgba(120, 190, 0, .08); padding: 14px 18px; margin-bottom: 20px; font-size: 15px; line-height: 1.8; color: var(--nx-dim); }
.wu-radar-tip i { font-size: 22px; color: #3d7a00; margin-top: 2px; } .wu-radar-tip b { display: block; color: #0b1020; font-family: var(--nx-display); }

/* 任務＋即時編輯器 */
.wu-mission { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
@media (max-width: 760px) { .wu-mission { grid-template-columns: 1fr; } }
.wu-mission .m { display: flex; gap: 10px; align-items: center; border: 1px solid var(--nx-line); border-radius: 12px; background: var(--nx-bg2); padding: 12px 14px; font-size: 14.5px; color: var(--nx-dim); transition: all .3s var(--nx-ease); }
.wu-mission .m i { font-size: 20px; color: var(--nx-faint); }
.wu-mission .m.done { border-color: #3d7a00; background: #eaf6d6; color: #1f3d00; transform: scale(1.02); } .wu-mission .m.done i { color: #3d7a00; }
.wu-live { border: 1px solid #1b2033; border-radius: 18px; overflow: hidden; background: #0b0d14; box-shadow: 0 24px 50px -26px rgba(6, 7, 11, .7); margin-bottom: 26px; }
.wu-live-bar { display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid rgba(160, 180, 255, .14); background: #0f121b; }
.wu-live-bar .grp { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.wu-live-bar .lb { font-family: var(--nx-mono); font-size: 11.5px; color: #5b6378; margin-right: 4px; }
.wu-live-bar button { font-family: var(--nx-mono); font-size: 12.5px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); border-radius: 8px; padding: 6px 12px; cursor: pointer; transition: all .2s; display: inline-flex; gap: 6px; align-items: center; }
.wu-live-bar button:hover { color: #06070b; background: #c6ff3d; border-color: #c6ff3d; }
.wu-live-bar button[aria-pressed="true"] { color: #06070b; background: #c6ff3d; border-color: #c6ff3d; }
.wu-live-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; }
@media (max-width: 860px) { .wu-live-grid { grid-template-columns: 1fr; } }
.wu-ed { display: flex; flex-direction: column; border-right: 1px solid rgba(160, 180, 255, .14); min-width: 0; }
.wu-ed .wu-code-bar { background: transparent; color: #5b6378; } .wu-ed .wu-code-bar em { font-style: normal; color: #5b6378; }
.wu-ed .wu-code-bar button { color: #8d96ad; border-color: rgba(160, 180, 255, .2); background: transparent; }
#liveCode { flex: 1; min-height: 340px; width: 100%; resize: none; border: 0; outline: 0; background: transparent; color: #c6ff3d; font-family: var(--nx-mono); font-size: 13.5px; line-height: 1.8; padding: 14px 16px; tab-size: 2; white-space: pre; overflow: auto; }
#liveCode:focus { box-shadow: inset 0 0 0 2px rgba(198, 255, 61, .3); }
.wu-pvbox { display: flex; flex-direction: column; background: #151927; min-width: 0; }
.wu-pvbar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid rgba(160, 180, 255, .14); font-family: var(--nx-mono); font-size: 11.5px; color: #5b6378; }
.wu-pvbar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3042; } .wu-pvbar span { margin-left: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.wu-pvstage { flex: 1; display: flex; justify-content: center; padding: 14px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px); }
.wu-pvstage iframe { width: 100%; height: 100%; min-height: 320px; border: 0; border-radius: 10px; background: #fff; transition: width .3s var(--nx-ease); max-width: 100%; }

/* 資源篩選 */
.wu-resbar { display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center; margin: 4px 0 8px; }
.wu-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.wu-filter button { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); background: var(--nx-bg2); border: 1px solid var(--nx-line); border-radius: 8px; padding: 8px 13px; cursor: pointer; transition: all .2s; }
.wu-filter button:hover { border-color: var(--nx-lime); color: var(--nx-ink); }
.wu-filter button[aria-pressed="true"] { background: var(--nx-lime); border-color: var(--nx-lime); color: #06070b; font-weight: 600; }
.wu-filter .c { opacity: .65; margin-left: 4px; }
.wu-search { display: flex; align-items: center; gap: 8px; border: 1px solid var(--nx-line); border-radius: 8px; padding: 0 12px; background: var(--nx-bg2); color: var(--nx-faint); }
.wu-search:focus-within { border-color: var(--nx-lime); }
.wu-search input { background: none; border: 0; outline: 0; color: var(--nx-ink); font-family: var(--nx-mono); font-size: 12.5px; padding: 9px 0; width: 200px; }
.wu-count { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-faint); margin: 0 0 12px !important; }
.wu-res-item { position: relative; }
.wu-res-item[hidden] { display: none; }
.wu-res-item .wu-link { padding-right: 62px; }
.wu-res-item .star { position: absolute; right: 12px; top: 12px; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--nx-line); background: var(--nx-bg2); color: var(--nx-faint); font-size: 17px; cursor: pointer; transition: all .2s; display: grid; place-items: center; }
.wu-res-item .star:hover { color: #e0a800; border-color: #e0a800; transform: scale(1.1); }
.wu-res-item .star.on { color: #e0a800; background: #fff6d8; border-color: #f3dc8a; }
.wu-res-item .wu-link .go { display: none; }
.wu-empty { text-align: center; padding: 36px; border: 1px dashed var(--nx-line); border-radius: 14px; color: var(--nx-faint); font-family: var(--nx-mono); font-size: 13px; }
.wu-favbox { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 20px; }
.wu-favbox a { display: inline-flex; gap: 8px; align-items: center; padding: 8px 14px; border-radius: 999px; border: 1px solid #f3dc8a; background: #fff6d8; color: #6b4a00 !important; font-size: 14px; text-decoration: none !important; font-weight: 600; }
.wu-favbox a i { color: #e0a800; } .wu-favbox .none { font-size: 14px !important; color: var(--nx-faint) !important; margin: 0; }

/* 提問產生器 */
.wu-pb { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 14px 0 22px; align-items: stretch; }
@media (max-width: 860px) { .wu-pb { grid-template-columns: 1fr; } }
.wu-pb-ctrl { border: 1px solid var(--nx-line); border-radius: 16px; background: var(--nx-bg2); padding: 18px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 10px 26px -18px rgba(20, 30, 80, .35); }
.wu-opt { display: flex; gap: 10px; align-items: center; font-size: 14.5px; color: var(--nx-ink); cursor: pointer; } .wu-opt input { accent-color: #3d7a00; width: 17px; height: 17px; }
#pbCode { flex: 1; min-height: 130px; width: 100%; border: 1px solid var(--nx-line); border-radius: 10px; padding: 12px 14px; font-family: var(--nx-mono); font-size: 13px; line-height: 1.7; background: #f8f9fc; color: #141a2e; resize: vertical; outline: 0; }
#pbCode:focus { border-color: #3d7a00; }
.wu-pb-out { border: 1px solid #1b2033; border-radius: 16px; overflow: hidden; background: #06070b; display: flex; flex-direction: column; }
.wu-pb-out pre { margin: 0; padding: 16px 18px; flex: 1; white-space: pre-wrap; word-break: break-word; font-family: var(--nx-mono); font-size: 13px; line-height: 1.8; color: #c3cbe0; }
.wu-pb-out .wu-code-bar button { color: #8d96ad; }

/* 作業完成 */
.wu-done { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; border: 1px solid #3d7a00; border-radius: 14px; background: linear-gradient(120deg, #e7f5d3, #fff 80%); padding: 16px 20px; margin: 4px 0 14px; animation: wuPop .5s var(--nx-ease); }
.wu-done[hidden] { display: none; } .wu-done > i { font-size: 28px; color: #e0a800; } .wu-done div { flex: 1; min-width: 200px; } .wu-done b { display: block; color: #0b1020; font-family: var(--nx-display); font-size: 17px; } .wu-done span { font-size: 14px; color: var(--nx-dim); }
@keyframes wuPop { from { transform: scale(.94); opacity: 0; } to { transform: none; opacity: 1; } }
.wu-toast { position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px); background: #0b0d14; color: #c6ff3d; font-family: var(--nx-mono); font-size: 13.5px; padding: 12px 20px; border-radius: 12px; box-shadow: 0 20px 40px -12px rgba(0, 0, 0, .6); border: 1px solid rgba(198, 255, 61, .4); opacity: 0; pointer-events: none; transition: all .3s var(--nx-ease); z-index: 3000; }
.wu-toast.show { opacity: 1; transform: translate(-50%, 0); }
.wu-sec { background: transparent !important; }

/* =========================================================
   共用小工具（web02／web03）：檔名檢查、請求模擬、建站選擇器、瀏覽器偵測
   ========================================================= */
.wu-tool { border: 1px solid var(--nx-line); border-radius: 18px; background: var(--nx-bg2); padding: 20px 22px; margin: 16px 0 24px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); }
.wu-tool-hd { display: flex; align-items: center; gap: 10px; font-family: var(--nx-mono); font-size: 12px; letter-spacing: .08em; color: var(--nx-lime); margin-bottom: 14px; text-transform: uppercase; }
.wu-tool-hd i { font-size: 16px; }
.wu-input { width: 100%; font-family: var(--nx-mono); font-size: 15px; padding: 12px 14px; border-radius: 10px; border: 1.5px solid var(--nx-line); background: #f8f9fc; color: #141a2e; outline: 0; transition: border-color .2s, box-shadow .2s; }
.wu-input:focus { border-color: var(--nx-lime); box-shadow: 0 0 0 4px rgba(61, 122, 0, .12); }
.wu-chipbtns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.wu-chipbtns button { font-family: var(--nx-mono); font-size: 12.5px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--nx-line); background: transparent; color: var(--nx-dim); cursor: pointer; transition: all .2s; }
.wu-chipbtns button:hover { border-color: var(--nx-lime); color: var(--nx-lime); }
.wu-rules { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.wu-rules li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.7; color: var(--nx-dim); padding: 8px 12px; border-radius: 10px; background: #f4f6fb; transition: all .25s; }
.wu-rules li i { margin-top: 3px; font-size: 16px; }
.wu-rules li.ok { background: #eaf6d6; color: #1f3d00; } .wu-rules li.ok i { color: #3d7a00; }
.wu-rules li.bad { background: #fde9f1; color: #7a1237; } .wu-rules li.bad i { color: #d62c7e; }
.wu-rules li.warn { background: #fff6d8; color: #6b4a00; } .wu-rules li.warn i { color: #e0a800; }
.wu-verdict { margin-top: 12px; font-family: var(--nx-display); font-size: 17px; font-weight: 700; color: var(--nx-ink); }
.wu-verdict.ok { color: #3d7a00; } .wu-verdict.bad { color: #d62c7e; }

/* 請求流程模擬 */
.wu-sim-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.wu-sim-row .wu-input { flex: 1; min-width: 220px; }
.wu-sim-net { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; align-items: stretch; position: relative; margin-bottom: 14px; }
@media (max-width: 640px) { .wu-sim-net { grid-template-columns: 1fr; } }
.wu-node { border: 1.5px solid var(--nx-line); border-radius: 14px; padding: 14px 12px; text-align: center; background: #f8f9fc; transition: all .35s var(--nx-ease); }
.wu-node i { font-size: 26px; color: var(--nx-faint); transition: color .3s; display: block; margin-bottom: 6px; }
.wu-node b { display: block; font-family: var(--nx-display); font-size: 15px; color: var(--nx-ink); }
.wu-node small { font-family: var(--nx-mono); font-size: 11.5px; color: var(--nx-faint); display: block; margin-top: 4px; min-height: 1.4em; }
.wu-node.on { border-color: #3d7a00; background: #eaf6d6; transform: translateY(-4px); box-shadow: 0 12px 24px -14px rgba(61, 122, 0, .6); } .wu-node.on i { color: #3d7a00; }
.wu-simlog { font-family: var(--nx-mono); font-size: 13px; background: #06070b; color: #c3cbe0; border-radius: 12px; padding: 14px 16px; min-height: 96px; line-height: 1.9; }
.wu-simlog .t { color: #c6ff3d; } .wu-simlog .d { color: #5b6378; }

/* 建站選擇器 */
.wu-pick { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 22px; margin-bottom: 18px; }
@media (max-width: 700px) { .wu-pick { grid-template-columns: 1fr; } }
.wu-pick label { font-size: 14px; color: var(--nx-dim); display: block; font-weight: 700; margin-bottom: 6px; }
.wu-seg2 { display: flex; gap: 6px; }
.wu-seg2 button { flex: 1; font-family: var(--nx-sans); font-size: 13.5px; padding: 9px 6px; border-radius: 9px; border: 1px solid var(--nx-line); background: transparent; color: var(--nx-dim); cursor: pointer; transition: all .2s; }
.wu-seg2 button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-bars { display: grid; gap: 10px; }
.wu-bar { display: grid; grid-template-columns: 130px minmax(0, 1fr) 44px; gap: 12px; align-items: center; font-size: 14px; color: var(--nx-ink); font-weight: 700; }
@media (max-width: 560px) { .wu-bar { grid-template-columns: 96px minmax(0, 1fr) 36px; font-size: 13px; } }
.wu-bar i { display: block; height: 14px; border-radius: 8px; background: #e8ebf3; overflow: hidden; } .wu-bar i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3a63e0, #3d7a00); border-radius: 8px; transition: width .5s var(--nx-ease); }
.wu-bar.top i b { background: linear-gradient(90deg, #3d7a00, #8fd400); }
.wu-bar em { font-style: normal; font-family: var(--nx-mono); color: var(--nx-dim); text-align: right; }
.wu-reco { margin-top: 14px; border-radius: 12px; padding: 14px 18px; background: #eaf6d6; color: #1f3d00; font-size: 15px; line-height: 1.8; }
.wu-reco b { font-family: var(--nx-display); }

/* 瀏覽器偵測 */
.wu-me { display: flex; flex-wrap: wrap; gap: 12px; }
.wu-me > div { flex: 1; min-width: 150px; border: 1px solid var(--nx-line); border-radius: 12px; padding: 12px 14px; background: #f8f9fc; }
.wu-me small { display: block; font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); letter-spacing: .06em; }
.wu-me b { font-family: var(--nx-display); font-size: 19px; color: var(--nx-ink); }

/* =========================================================
   UNIT 03：步驟工作台、架構互動、心情配色、CSS 實驗室、診斷
   ========================================================= */
.wu-mood { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; margin: 6px 0 14px; }
@media (max-width: 760px) { .wu-mood { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wu-mood button { text-align: left; border: 2px solid transparent; border-radius: 14px; padding: 0; overflow: hidden; cursor: pointer; background: #fff; box-shadow: 0 10px 24px -16px rgba(20, 30, 80, .45); transition: all .25s var(--nx-ease); font-family: inherit; }
.wu-mood button:hover { transform: translateY(-3px); }
.wu-mood button[aria-pressed="true"] { border-color: #0b0d14; box-shadow: 0 0 0 4px rgba(61, 122, 0, .2), 0 14px 28px -14px rgba(20, 30, 80, .55); }
.wu-mood .sw { height: 62px; display: flex; } .wu-mood .sw i { flex: 1; }
.wu-mood .nm { display: block; padding: 8px 12px 10px; font-size: 14px; font-weight: 700; color: #141a2e; } .wu-mood .nm small { display: block; font-weight: 400; color: var(--nx-faint); font-size: 12px; }
.wu-moodprev { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 16px; align-items: stretch; margin-bottom: 8px; }
@media (max-width: 800px) { .wu-moodprev { grid-template-columns: 1fr; } }
.wu-moodcard { border-radius: 16px; padding: 28px 22px; text-align: center; transition: all .4s var(--nx-ease); min-height: 190px; box-shadow: 0 16px 34px -20px rgba(0, 0, 0, .5); }
.wu-moodcard h5 { font-size: 26px; margin: 0 0 10px; letter-spacing: .1em; font-weight: 700; } .wu-moodcard p { margin: 0 !important; font-size: 15.5px !important; line-height: 2 !important; }
.wu-moodcard a { font-size: 14px; text-decoration: underline; }
.wu-contrast { border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; padding: 16px 18px; display: flex; flex-direction: column; gap: 10px; justify-content: center; }
.wu-contrast .big { font-family: var(--nx-display); font-size: 40px; font-weight: 700; line-height: 1; color: #0b1020; } .wu-contrast .big small { font-size: 16px; color: var(--nx-faint); }
.wu-contrast .tags { display: flex; gap: 6px; flex-wrap: wrap; } .wu-contrast .tags span { font-family: var(--nx-mono); font-size: 11.5px; padding: 3px 9px; border-radius: 6px; font-weight: 700; }
.wu-contrast .tags .p { background: #eaf6d6; color: #2f6300; } .wu-contrast .tags .f { background: #fde9f1; color: #a01851; }
.wu-contrast small.d { color: var(--nx-dim); font-size: 13px; line-height: 1.7; }

.wu-anat { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; margin: 16px 0; }
@media (max-width: 860px) { .wu-anat { grid-template-columns: 1fr; } }
.wu-diagram { border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; padding: 14px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); }
.wu-diagram .blk { border: 2px dashed #b9c1d6; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: all .2s; font-family: var(--nx-mono); font-size: 12.5px; color: #3b4562; position: relative; background: rgba(255, 255, 255, .6); }
.wu-diagram .blk > .tag { display: inline-block; font-weight: 700; margin-bottom: 6px; }
.wu-diagram .blk:hover { border-color: #3d7a00; background: #f2f9e6; }
.wu-diagram .blk.on { border: 2px solid #3d7a00; background: #eaf6d6; box-shadow: 0 0 0 4px rgba(61, 122, 0, .15); }
.wu-diagram .row { display: grid; gap: 10px; }
.wu-diagram .hid { background: repeating-linear-gradient(45deg, #f1f3f9 0 8px, #fff 8px 16px); }
.wu-diagram .hidnote { float: right; font-size: 11px; color: #8089a1; }
.wu-anat-code { margin: 0; }
.wu-anat-code .wu-code pre { padding: 12px 0; }
.wu-anat-code .ln { display: block; padding: 0 16px; border-left: 3px solid transparent; transition: background .2s; }
.wu-anat-code .ln i { display: inline-block; width: 26px; color: #4d5670; font-style: normal; user-select: none; }
.wu-anat-code .ln.hl { background: rgba(198, 255, 61, .13); border-left-color: #c6ff3d; }
.wu-anat-note { border-left: 4px solid #3d7a00; background: #eaf6d6; border-radius: 0 12px 12px 0; padding: 12px 16px; font-size: 15px; line-height: 1.8; color: #1f3d00; margin-top: 12px; min-height: 76px; }
.wu-anat-note b { font-family: var(--nx-display); display: block; font-size: 16.5px; }

.wu-tree { font-family: var(--nx-mono); font-size: 14px; line-height: 1.9; background: #06070b; color: #c3cbe0; border-radius: 12px; padding: 14px 18px; margin-top: 12px; white-space: pre; overflow-x: auto; }
.wu-tree .d { color: #82a8ff; } .wu-tree .f { color: #c6ff3d; } .wu-tree .c { color: #5b6378; }
.wu-urlout { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #eaf6d6; font-family: var(--nx-mono); font-size: 14px; color: #1f3d00; word-break: break-all; }
.wu-urlout button { margin-left: auto; font-family: var(--nx-mono); font-size: 12px; border: 1px solid #3d7a00; background: #fff; color: #2f6300; border-radius: 8px; padding: 5px 12px; cursor: pointer; }

/* 步驟工作台 */
.wu-stepper { margin: 14px 0 24px; }
.wu-stepnav { display: flex; gap: 8px; overflow-x: auto; padding: 4px 2px 12px; scroll-snap-type: x proximity; }
.wu-stepnav button { flex: none; scroll-snap-align: center; width: 44px; height: 44px; border-radius: 12px; border: 1.5px solid var(--nx-line); background: #fff; font-family: var(--nx-mono); font-weight: 700; font-size: 14px; color: var(--nx-dim); cursor: pointer; position: relative; transition: all .2s; }
.wu-stepnav button:hover { border-color: #3d7a00; color: #3d7a00; }
.wu-stepnav button.done { background: #eaf6d6; border-color: #3d7a00; color: #2f6300; }
.wu-stepnav button.done::after { content: "✓"; position: absolute; right: -5px; top: -7px; font-size: 11px; width: 17px; height: 17px; border-radius: 50%; background: #3d7a00; color: #fff; display: grid; place-items: center; }
.wu-stepnav button[aria-current="step"] { background: #0b0d14; border-color: #0b0d14; color: #c6ff3d; transform: translateY(-2px); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6); }
.wu-stepbar { display: flex; align-items: center; gap: 12px; font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); margin-bottom: 14px; }
.wu-stepbar i { flex: 1; height: 6px; border-radius: 6px; background: #e1e5f0; overflow: hidden; } .wu-stepbar i b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3a63e0, #3d7a00); transition: width .4s var(--nx-ease); }
.wu-stepcard { border: 1px solid var(--nx-line); border-radius: 18px; background: #fff; padding: 22px 24px; margin-bottom: 14px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); animation: wuPop .35s var(--nx-ease); }
.wu-stepcard .hd { display: flex; gap: 14px; align-items: center; margin-bottom: 8px; }
.wu-stepcard .no { width: 44px; height: 44px; border-radius: 12px; background: #0b0d14; color: #c6ff3d; font-family: var(--nx-mono); font-weight: 700; display: grid; place-items: center; flex: none; font-size: 17px; }
.wu-stepcard h3 { margin: 0 !important; font-size: 21px !important; }
.wu-stepcard .goal { color: var(--nx-dim); margin: 0 0 12px !important; font-size: 15.5px !important; }
.wu-stepcard ol.todo { margin: 0 0 12px; padding-left: 22px; color: #2b3350; line-height: 1.9; font-size: 15.5px; } .wu-stepcard ol.todo li { margin-bottom: 4px; } .wu-stepcard ol.todo li::marker { color: #3d7a00; font-weight: 700; }
.wu-stepcard .note { font-size: 14.5px; line-height: 1.8; border-radius: 10px; padding: 10px 14px; background: #eef2fb; color: #2b3350; margin: 0; }
.wu-bench { border: 1px solid #1b2033; border-radius: 18px; overflow: hidden; background: #0b0d14; box-shadow: 0 24px 50px -26px rgba(6, 7, 11, .7); }
.wu-bench-bar { display: flex; flex-wrap: wrap; gap: 8px 14px; justify-content: space-between; align-items: center; padding: 10px 14px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); }
.wu-modes { display: inline-flex; gap: 4px; padding: 3px; border-radius: 10px; background: rgba(255, 255, 255, .05); }
.wu-modes button, .wu-bench-bar .act { font-family: var(--nx-mono); font-size: 12.5px; color: #c3cbe0; background: transparent; border: 0; padding: 7px 13px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: all .2s; }
.wu-modes button[aria-pressed="true"] { background: #c6ff3d; color: #06070b; font-weight: 700; }
.wu-bench-bar .act { border: 1px solid rgba(160, 180, 255, .2); } .wu-bench-bar .act:hover { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.wu-bench-bar .grp { display: flex; gap: 6px; flex-wrap: wrap; }
.wu-bench-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 420px; }
@media (max-width: 900px) { .wu-bench-grid { grid-template-columns: 1fr; } }
.wu-edwrap { min-width: 0; border-right: 1px solid rgba(160, 180, 255, .14); display: flex; flex-direction: column; position: relative; }
.wu-view { margin: 0; padding: 14px 0; font-family: var(--nx-mono); font-size: 13px; line-height: 1.8; color: #c3cbe0; overflow: auto; flex: 1; max-height: 520px; }
.wu-view .ln { display: block; padding: 0 16px; white-space: pre; border-left: 3px solid transparent; }
.wu-view .ln i { display: inline-block; width: 28px; color: #4d5670; font-style: normal; user-select: none; }
.wu-view .ln.new { background: rgba(198, 255, 61, .14); border-left-color: #c6ff3d; }
.wu-view .t { color: #ff7ab2; } .wu-view .a { color: #3df0ff; } .wu-view .s { color: #c6ff3d; } .wu-view .p { color: #82a8ff; } .wu-view .c { color: #5b6378; }
#w3Edit { flex: 1; width: 100%; min-height: 380px; resize: none; border: 0; outline: 0; background: transparent; color: #c6ff3d; font-family: var(--nx-mono); font-size: 13px; line-height: 1.8; padding: 14px 16px; tab-size: 2; white-space: pre; overflow: auto; }
#w3Edit:focus { box-shadow: inset 0 0 0 2px rgba(198, 255, 61, .3); }
.wu-legend2 { font-family: var(--nx-mono); font-size: 11.5px; color: #5b6378; padding: 6px 16px 10px; border-top: 1px solid rgba(160, 180, 255, .1); }
.wu-legend2 b { display: inline-block; width: 10px; height: 10px; background: rgba(198, 255, 61, .5); border-radius: 2px; vertical-align: -1px; margin-right: 6px; }
.wu-pv2 { background: #151927; display: flex; flex-direction: column; min-width: 0; }
.wu-pv2 .bar { display: flex; align-items: center; gap: 7px; padding: 10px 14px; border-bottom: 1px solid rgba(160, 180, 255, .14); font-family: var(--nx-mono); font-size: 11.5px; color: #5b6378; }
.wu-pv2 .bar i { width: 10px; height: 10px; border-radius: 50%; background: #2a3042; } .wu-pv2 .bar span { margin-left: 8px; padding: 3px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); }
.wu-pv2 .stage { flex: 1; padding: 14px; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, .02) 0 10px, transparent 10px 20px); display: flex; }
.wu-pv2 iframe { width: 100%; min-height: 360px; border: 0; border-radius: 10px; background: #fff; }
.wu-checks { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 7px; }
.wu-checks li { display: flex; gap: 10px; align-items: center; font-size: 14.5px; padding: 9px 14px; border-radius: 10px; background: #fff; border: 1px solid var(--nx-line); color: var(--nx-dim); transition: all .25s; }
.wu-checks li i { font-size: 17px; color: var(--nx-faint); }
.wu-checks li.ok { background: #eaf6d6; border-color: #3d7a00; color: #1f3d00; } .wu-checks li.ok i { color: #3d7a00; }
.wu-checks li code { font-size: .85em; }
.wu-stepfoot { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; margin-top: 16px; }
.wu-hint { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-faint); }
.wu-finish { display: grid; gap: 12px; border: 1px solid #3d7a00; background: linear-gradient(120deg, #e7f5d3, #fff 80%); border-radius: 16px; padding: 18px 20px; margin-top: 16px; }
.wu-finish[hidden] { display: none; } .wu-finish b { font-family: var(--nx-display); font-size: 18px; color: #0b1020; }

/* CSS 實驗室 */
.wu-lab2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 18px; align-items: stretch; margin: 14px 0 22px; }
@media (max-width: 860px) { .wu-lab2 { grid-template-columns: 1fr; } }
.wu-ctrls { border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; padding: 16px 18px; display: grid; gap: 11px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); }
.wu-ctrls .row { display: grid; grid-template-columns: 96px minmax(0, 1fr) 52px; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--nx-ink); }
.wu-ctrls .row b { font-family: var(--nx-mono); font-size: 12px; color: #3d7a00; text-align: right; font-weight: 600; }
.wu-ctrls input[type=range] { -webkit-appearance: none; appearance: none; height: 6px; border-radius: 6px; background: linear-gradient(90deg, #3a63e0, #3d7a00); outline: none; width: 100%; }
.wu-ctrls input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 18px; height: 18px; border-radius: 50%; background: #fff; border: 3px solid #3d7a00; cursor: grab; box-shadow: 0 2px 6px rgba(0, 0, 0, .25); }
.wu-ctrls input[type=range]::-moz-range-thumb { width: 12px; height: 12px; border-radius: 50%; background: #fff; border: 3px solid #3d7a00; }
.wu-ctrls .cols { display: flex; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 700; } .wu-ctrls input[type=color] { width: 44px; height: 34px; border: 1px solid var(--nx-line); border-radius: 8px; padding: 2px; background: #fff; cursor: pointer; }
.wu-labout { display: flex; flex-direction: column; gap: 12px; }
.wu-labstage { flex: 1; border-radius: 16px; display: grid; place-items: center; padding: 30px 20px; background: repeating-conic-gradient(#eef1f8 0 25%, #fff 0 50%) 0 0 / 22px 22px; border: 1px solid var(--nx-line); min-height: 240px; }
.wu-labcard { width: min(100%, 300px); padding: 26px 22px; text-align: center; color: #fff; transition: all .15s; }
.wu-labcard h5 { margin: 0 0 6px; font-size: 24px; font-weight: 700; color: inherit; } .wu-labcard p { margin: 0 !important; font-size: 14.5px !important; color: inherit !important; opacity: .92; }
.wu-fonts { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.wu-fonts button { border: 1px solid var(--nx-line); background: #fff; border-radius: 10px; padding: 10px 16px; cursor: pointer; font-size: 16px; color: #141a2e; transition: all .2s; }
.wu-fonts button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-fontprev { border: 1px solid var(--nx-line); border-radius: 14px; background: #fff; padding: 18px 22px; font-size: 22px; line-height: 1.9; color: #141a2e; margin-bottom: 10px; }

/* 診斷小幫手 */
.wu-diag { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; margin: 14px 0 22px; }
@media (max-width: 800px) { .wu-diag { grid-template-columns: 1fr; } }
.wu-diag .sym { display: grid; gap: 8px; align-content: start; }
.wu-diag .sym button { text-align: left; font-family: inherit; font-size: 14.5px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--nx-line); background: #fff; color: #2b3350; cursor: pointer; display: flex; gap: 10px; align-items: center; transition: all .2s; }
.wu-diag .sym button:hover { border-color: #3d7a00; } .wu-diag .sym button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-diag .ans { border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; padding: 18px 22px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); }
.wu-diag .ans h4 { font-family: var(--nx-display); font-size: 19px; margin: 0 0 4px; color: #0b1020; } .wu-diag .ans > p { font-size: 14.5px !important; color: var(--nx-dim) !important; margin: 0 0 12px !important; }
.wu-diag .ans ol { margin: 0; padding-left: 22px; display: grid; gap: 10px; } .wu-diag .ans li { font-size: 15px; line-height: 1.8; color: #2b3350; } .wu-diag .ans li b { color: #0b1020; }
.wu-light .wu-page.css h5 { color: #c6ff3d; } .wu-light .wu-page.css a.btn { background: #c6ff3d; color: #06070b !important; }
.wu-light .wu-page.js .cnt { color: #0a7; } .wu-light .wu-page.css.js .cnt { color: #c6ff3d; }
.wu-light .wu-url button:hover, .wu-light .wu-url button.on { background: #c6ff3d; color: #06070b; }
.wu-light .wu-demo-top label:has(input:checked) { border-color: #3d7a00; color: #2f6300; background: #eaf6d6; }
.wu-light .wu-urlnote { background: #eaf6d6; color: #1f3d00; }
.wu-light .nx-lab { background: #fff; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); } .wu-light .nx-lab-top { color: var(--nx-dim); } .wu-light .nx-lab-top .val { color: #3d7a00; }
.wu-light .nx-stage { background: repeating-linear-gradient(45deg, rgba(20, 30, 80, .03) 0 10px, transparent 10px 20px); }
.wu-light .nx-lab input[type=range] { background: linear-gradient(90deg, #3a63e0, #3d7a00); } .wu-light .nx-lab input[type=range]::-webkit-slider-thumb { border-color: #3d7a00; }

/* UNIT 03 AI 學習搭檔 */
.wu-aiask { margin-top: 16px; border: 1px solid #1b2033; border-radius: 18px; background: #0b0d14; color: #c3cbe0; overflow: hidden; box-shadow: 0 20px 44px -26px rgba(6, 7, 11, .7); }
.wu-aiask .hd { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: space-between; align-items: center; padding: 12px 16px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); font-family: var(--nx-mono); font-size: 12.5px; color: #c6ff3d; }
.wu-aiask .hd .wu-seg2 button { color: #c3cbe0; border-color: rgba(160, 180, 255, .25); font-family: var(--nx-mono); font-size: 12px; padding: 6px 12px; flex: none; }
.wu-aiask .hd .wu-seg2 button[aria-pressed="true"] { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.wu-aiask pre { margin: 0; padding: 14px 18px; max-height: 280px; overflow: auto; white-space: pre-wrap; word-break: break-word; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.8; color: #c3cbe0; }
.wu-aiask .ft { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 10px 16px; border-top: 1px solid rgba(160, 180, 255, .14); font-size: 12.5px; color: #8d96ad; }
.wu-aiask .ft button { font-family: var(--nx-mono); font-size: 12.5px; background: #c6ff3d; color: #06070b; border: 0; border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 700; }
.wu-looprow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 12px; }
.wu-looprow .sep { color: var(--nx-faint); }
.wu-looprow button { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; font-family: inherit; padding: 10px 16px 10px 12px; border-radius: 14px; border: 1.5px solid var(--nx-line); background: #fff; cursor: pointer; transition: all .2s; }
.wu-looprow button .n { grid-row: 1 / 3; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: #eef2fb; font-family: var(--nx-mono); font-weight: 700; color: #2b3350; }
.wu-looprow button b { font-size: 15px; color: #0b1020; } .wu-looprow button small { font-family: var(--nx-mono); font-size: 11px; color: var(--nx-faint); }
.wu-looprow button:hover { border-color: #3d7a00; }
.wu-looprow button[aria-pressed="true"] { background: #0b0d14; border-color: #0b0d14; } .wu-looprow button[aria-pressed="true"] b { color: #fff; } .wu-looprow button[aria-pressed="true"] .n { background: #c6ff3d; color: #06070b; }
.wu-looppanel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; border: 1px solid var(--nx-line); border-radius: 18px; background: #fff; padding: 20px 22px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); margin-bottom: 22px; animation: wuPop .3s var(--nx-ease); }
@media (max-width: 800px) { .wu-looppanel { grid-template-columns: 1fr; } }
.wu-looppanel h4 { font-family: var(--nx-display); font-size: 20px; color: #0b1020; margin: 0 0 8px; } .wu-looppanel h4 em { font-style: normal; font-family: var(--nx-mono); font-size: 12px; color: #3d7a00; margin-left: 10px; font-weight: 500; }
.wu-looppanel p { margin: 0 0 10px !important; font-size: 15.5px !important; } .wu-looppanel ul { margin: 0; padding-left: 20px; font-size: 15px; line-height: 1.9; color: #2b3350; } .wu-looppanel ul li::marker { color: #3d7a00; }
.wu-looppanel .pp { border: 1px solid #1b2033; border-radius: 14px; overflow: hidden; background: #06070b; align-self: start; }
.wu-looppanel .pp pre { margin: 0; padding: 14px 16px; white-space: pre-wrap; font-family: var(--nx-mono); font-size: 12.5px; line-height: 1.8; color: #c3cbe0; }
.wu-looppanel .pp .wu-code-bar button { color: #8d96ad; }
.wu-looppanel .pp.none { display: flex; gap: 12px; align-items: center; padding: 18px; background: #eaf6d6; border-color: #3d7a00; color: #1f3d00; font-size: 15px; } .wu-looppanel .pp.none i { font-size: 24px; color: #3d7a00; }
.syn-tag { font-family: var(--nx-mono); font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 5px; letter-spacing: .06em; display: inline-block; margin-bottom: 4px; }
.syn-tag.html { background: #fff0e6; color: #d9480f; } .syn-tag.css { background: #e9eeff; color: #2f55d4; } .syn-tag.js { background: #fff6d8; color: #8a5c00; }
.syn-ex { margin-top: 6px; } .syn-ex code { display: inline-block; font-size: 12px !important; word-break: break-all; }
.syn-ask { font-size: 13.5px; color: var(--nx-dim); line-height: 1.7; margin-bottom: 8px; }
.wu-light .wu-table td:first-child code { white-space: normal; }
.wu-k { font-family: var(--nx-mono); font-size: 12px; padding: 2px 8px; border-radius: 6px; border: 1px solid var(--nx-line); border-bottom-width: 3px; background: var(--nx-bg2); color: var(--nx-ink); font-weight: 600; }

/* UNIT 04 */
.wu-scorebox { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; margin: 14px 0 22px; align-items: stretch; }
@media (max-width: 860px) { .wu-scorebox { grid-template-columns: 1fr; } }
.wu-scorebox .qs { border: 1px solid var(--nx-line); border-radius: 18px; background: #fff; padding: 18px 20px; display: grid; gap: 14px; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); }
.wu-scorebox .qs label { font-size: 14px; font-weight: 700; color: var(--nx-ink); display: block; margin-bottom: 6px; }
.wu-scoreout { border-radius: 18px; padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 8px; transition: all .3s var(--nx-ease); background: #fff6d8; border: 1px solid #f3dc8a; }
.wu-scoreout small { font-family: var(--nx-mono); font-size: 11.5px; letter-spacing: .06em; color: var(--nx-dim); } .wu-scoreout b { font-family: var(--nx-display); font-size: 30px; color: #0b1020; line-height: 1.2; } .wu-scoreout span { font-size: 14.5px; line-height: 1.8; color: #2b3350; }
.wu-scoreout.high { background: #e7f5d3; border-color: #3d7a00; } .wu-scoreout.low { background: #fde9f1; border-color: #e8a3c2; }
.wu-moodchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 4px; }
.wu-moodchips button { display: inline-flex; gap: 6px; align-items: center; font-family: var(--nx-sans); font-size: 13.5px; font-weight: 700; padding: 7px 14px 7px 8px; border-radius: 999px; border: 1.5px solid var(--nx-line); background: #fff; color: #141a2e; cursor: pointer; transition: all .2s; }
.wu-moodchips button i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; margin-right: -4px; }
.wu-moodchips button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-drop { border: 2px dashed #b9c1d6; border-radius: 16px; background: #fff; padding: 26px 20px; text-align: center; cursor: pointer; transition: all .2s; display: block; }
.wu-drop:hover, .wu-drop.over { border-color: #3d7a00; background: #f2f9e6; }
.wu-drop i { font-size: 34px; color: #3d7a00; display: block; margin-bottom: 6px; } .wu-drop b { font-family: var(--nx-display); color: #0b1020; } .wu-drop span { display: block; font-size: 13.5px; color: var(--nx-dim); margin-top: 4px; }
.wu-drop input { display: none; }
.wu-imgres { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; }
@media (max-width: 640px) { .wu-imgres { grid-template-columns: 1fr; } }
.wu-imgres img { width: 100%; border-radius: 12px; border: 1px solid var(--nx-line); object-fit: cover; aspect-ratio: 4 / 3; background: #eef2fb; }
.wu-imgres .meta b { display: block; font-family: var(--nx-mono); font-size: 13px; color: var(--nx-ink); word-break: break-all; } .wu-imgres .meta span { font-family: var(--nx-mono); font-size: 12px; color: var(--nx-faint); }
.wu-gstage { border-radius: 16px; padding: 0; position: relative; overflow: hidden; min-height: 240px; background: repeating-conic-gradient(#e6e9f2 0 25%, #fff 0 50%) 0 0 / 24px 24px; border: 1px solid var(--nx-line); display: grid; place-items: center; }
.wu-gstage .layer { position: absolute; inset: 0; } .wu-gstage .lbl { position: relative; z-index: 1; font-family: var(--nx-display); font-weight: 700; font-size: 22px; color: #0b1020; padding: 8px 16px; background: rgba(255, 255, 255, .75); border-radius: 10px; }
.wu-anibox { border-radius: 16px; min-height: 200px; display: grid; place-items: center; background: #0b0d14; overflow: hidden; padding: 20px; }
.wu-anibox .t { font-family: var(--nx-display); font-size: 28px; font-weight: 700; color: #c6ff3d; background: rgba(198, 255, 61, .1); border: 1px solid rgba(198, 255, 61, .4); padding: 14px 26px; border-radius: 14px; }
.wu-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.wu-presets button { font-family: var(--nx-mono); font-size: 12.5px; padding: 7px 13px; border-radius: 8px; border: 1px solid var(--nx-line); background: #fff; color: var(--nx-dim); cursor: pointer; } .wu-presets button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-sel { font-family: var(--nx-mono); font-size: 13px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--nx-line); background: #fff; color: #141a2e; width: 100%; }
.wu-jq { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin: 14px 0 22px; align-items: stretch; }
@media (max-width: 860px) { .wu-jq { grid-template-columns: 1fr; } }
.wu-jqbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wu-jqbtns button { text-align: left; font-family: inherit; border: 1px solid var(--nx-line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; transition: all .2s; display: grid; gap: 2px; }
.wu-jqbtns button:hover { border-color: #3d7a00; transform: translateY(-2px); } .wu-jqbtns button.on { background: #0b0d14; border-color: #0b0d14; } .wu-jqbtns button.on code, .wu-jqbtns button.on small { color: #c6ff3d; }
.wu-jqbtns code { font-size: 12.5px; color: #2f6300; background: none; border: 0; padding: 0; } .wu-jqbtns small { font-size: 12px; color: var(--nx-dim); }
.wu-jqstage { border-radius: 16px; overflow: hidden; border: 1px solid var(--nx-line); background: #f4f6fb; min-height: 200px; } .wu-jqstage iframe { width: 100%; height: 220px; border: 0; display: block; }
.wu-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 8px; max-height: 300px; overflow: auto; padding: 4px; }
.wu-icons button { border: 1px solid var(--nx-line); background: #fff; border-radius: 12px; padding: 12px 4px 8px; cursor: pointer; transition: all .2s; display: grid; gap: 6px; justify-items: center; color: #141a2e; }
.wu-icons button:hover { border-color: #3d7a00; transform: translateY(-2px); } .wu-icons button[aria-pressed="true"] { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }
.wu-icons i { font-size: 24px; } .wu-icons small { font-family: var(--nx-mono); font-size: 9.5px; color: inherit; opacity: .65; word-break: break-all; text-align: center; }
.wu-icoprev { border-radius: 16px; border: 1px solid var(--nx-line); background: #fff; min-height: 150px; display: grid; place-items: center; }
.wu-light .wu-diagram .blk { color: #3b4562; }

/* =========================================================
   共用修正：顏色選擇器、捲軸、編輯區「放大／縮小」與字級調整
   ========================================================= */
input[type=color] { -webkit-appearance: none; appearance: none; width: 58px; height: 40px; padding: 0; border: 2px solid #cfd5e6; border-radius: 12px; background: none; cursor: pointer; overflow: hidden; vertical-align: middle; transition: border-color .2s, transform .2s; }
input[type=color]:hover { border-color: #3d7a00; transform: scale(1.05); }
input[type=color]::-webkit-color-swatch-wrapper { padding: 0; }
input[type=color]::-webkit-color-swatch { border: 0; border-radius: 9px; }
input[type=color]::-moz-color-swatch { border: 0; border-radius: 9px; }
.wu-ctrls .cols { color: #141a2e; flex-wrap: wrap; } .wu-ctrls .cols span, .wu-ctrls .row span { color: #141a2e; }
.wu-view, #w3Edit, #liveCode, .wu-code pre, .wu-aiask pre, .wu-pb-out pre, .wu-tree, #pbCode, .wu-play textarea, .wu-play pre { scrollbar-width: thin; scrollbar-color: #3a4260 #0b0d14; }
.wu-view::-webkit-scrollbar, #w3Edit::-webkit-scrollbar, #liveCode::-webkit-scrollbar, .wu-code pre::-webkit-scrollbar, .wu-aiask pre::-webkit-scrollbar, .wu-pb-out pre::-webkit-scrollbar, .wu-tree::-webkit-scrollbar, .wu-play textarea::-webkit-scrollbar, .wu-play pre::-webkit-scrollbar { width: 10px; height: 10px; }
.wu-view::-webkit-scrollbar-track, #w3Edit::-webkit-scrollbar-track, #liveCode::-webkit-scrollbar-track, .wu-code pre::-webkit-scrollbar-track, .wu-aiask pre::-webkit-scrollbar-track, .wu-pb-out pre::-webkit-scrollbar-track, .wu-tree::-webkit-scrollbar-track, .wu-play textarea::-webkit-scrollbar-track, .wu-play pre::-webkit-scrollbar-track { background: #0b0d14; }
.wu-view::-webkit-scrollbar-thumb, #w3Edit::-webkit-scrollbar-thumb, #liveCode::-webkit-scrollbar-thumb, .wu-code pre::-webkit-scrollbar-thumb, .wu-aiask pre::-webkit-scrollbar-thumb, .wu-pb-out pre::-webkit-scrollbar-thumb, .wu-tree::-webkit-scrollbar-thumb, .wu-play textarea::-webkit-scrollbar-thumb, .wu-play pre::-webkit-scrollbar-thumb { background: #3a4260; border-radius: 6px; border: 2px solid #0b0d14; }
.wu-view::-webkit-scrollbar-corner, #w3Edit::-webkit-scrollbar-corner, #liveCode::-webkit-scrollbar-corner { background: #0b0d14; }
#w3Edit, #liveCode, .wu-view, #pbCode, .wu-pb-out pre { font-size: var(--wu-fs, 13px); }
.wu-tools2 { display: inline-flex; gap: 6px; margin-left: 4px; padding-left: 10px; border-left: 1px solid rgba(160, 180, 255, .2); }
.wu-tools2 button { font-family: var(--nx-mono); font-size: 12.5px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .25); border-radius: 8px; padding: 6px 11px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; transition: all .2s; }
.wu-tools2 button:hover { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.wu-tools2 .wu-maxbtn { color: #06070b; background: #c6ff3d; border-color: #c6ff3d; font-weight: 700; }
html.wu-lock { overflow: hidden; }
.wu-max-on { position: fixed !important; inset: 10px !important; z-index: 4000 !important; margin: 0 !important; width: auto !important; max-width: none !important; display: flex !important; flex-direction: column; border-radius: 16px !important; overflow: auto; box-shadow: 0 0 0 100vmax rgba(6, 7, 11, .78), 0 30px 80px rgba(0, 0, 0, .6) !important; background: #0b0d14; animation: wuPop .25s var(--nx-ease); }
.wu-max-on .wu-bench, .wu-max-on .wu-live { flex: 1; display: flex; flex-direction: column; border-radius: 0; box-shadow: none; min-height: 0; }
.wu-max-on .wu-bench-grid, .wu-max-on .wu-live-grid { flex: 1; min-height: calc(100vh - 360px); }
.wu-max-on #w3Edit, .wu-max-on #liveCode, .wu-max-on .wu-view { max-height: none; min-height: calc(100vh - 380px); height: 100%; }
.wu-max-on .wu-pv2 iframe, .wu-max-on .wu-pvstage iframe { min-height: calc(100vh - 380px); height: 100%; }
.wu-max-on.wu-work { background: #f4f6fb; padding: 14px; gap: 12px; }
.wu-max-on.wu-work .wu-bench { border-radius: 16px; flex: none; min-height: calc(100vh - 200px); }
.wu-max-on.wu-work .wu-bench-grid { min-height: calc(100vh - 290px); }
.wu-max-on.wu-pb { background: #f4f6fb; padding: 14px; } .wu-max-on.wu-pb .wu-pb-ctrl, .wu-max-on.wu-pb .wu-pb-out { min-height: calc(100vh - 80px); }
.wu-max-on.wu-pb #pbCode { min-height: 50vh; }
.wu-max-hint { display: none; position: fixed; right: 24px; bottom: 20px; z-index: 4100; font-family: var(--nx-mono); font-size: 12px; color: #c6ff3d; background: #0b0d14; border: 1px solid rgba(198, 255, 61, .4); padding: 6px 12px; border-radius: 8px; }
html.wu-lock .wu-max-hint { display: block; }

/* =========================================================
   UNIT 05：語法大全（遊樂場、語法目錄、互動小工具）
   ========================================================= */
.wu-play { border: 1px solid #1b2033; border-radius: 18px; background: #0b0d14; overflow: hidden; margin: 16px 0 26px; box-shadow: 0 24px 50px -26px rgba(6, 7, 11, .7); scroll-margin-top: 90px; }
.wu-play.flash { animation: wuFlash 1.4s ease; }
@keyframes wuFlash { 0%, 100% { box-shadow: 0 24px 50px -26px rgba(6, 7, 11, .7); } 30% { box-shadow: 0 0 0 4px #c6ff3d, 0 24px 50px -20px rgba(198, 255, 61, .6); } }
.wu-play-bar { display: flex; flex-wrap: wrap; gap: 10px 14px; align-items: center; padding: 10px 14px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); }
.wu-play-bar .wu-sel { width: auto; min-width: 200px; max-width: 100%; flex: 1 1 220px; background: #151927; color: #c3cbe0; border-color: rgba(160, 180, 255, .25); }
.wu-play-bar .grp { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; align-items: center; }
.wu-play .wu-modes button, .wu-play-bar .act { font-family: var(--nx-mono); font-size: 12.5px; color: #c3cbe0; background: transparent; border: 0; padding: 7px 13px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wu-play .wu-modes button[aria-pressed="true"] { background: #c6ff3d; color: #06070b; font-weight: 700; }
.wu-play-bar .act { border: 1px solid rgba(160, 180, 255, .2); } .wu-play-bar .act:hover { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.wu-play-desc { padding: 9px 16px; font-size: 13.5px; color: #8d96ad; border-bottom: 1px solid rgba(160, 180, 255, .1); line-height: 1.7; } .wu-play-desc b { color: #c6ff3d; font-family: var(--nx-mono); font-weight: 600; font-size: 12.5px; }
.wu-play-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 400px; }
@media (max-width: 900px) { .wu-play-grid { grid-template-columns: 1fr; } }
.wu-play-ed { border-right: 1px solid rgba(160, 180, 255, .14); display: flex; min-width: 0; }
.wu-play textarea { flex: 1; width: 100%; min-height: 360px; resize: none; border: 0; outline: 0; background: transparent; color: #c6ff3d; font-family: var(--nx-mono); font-size: var(--wu-fs, 13px); line-height: 1.8; padding: 14px 16px; tab-size: 2; white-space: pre; overflow: auto; }
.wu-play textarea:focus { box-shadow: inset 0 0 0 2px rgba(198, 255, 61, .3); }
.wu-play-out { display: flex; flex-direction: column; background: #151927; min-width: 0; }
.wu-pvbar2 { display: flex; align-items: center; gap: 7px; padding: 9px 14px; border-bottom: 1px solid rgba(160, 180, 255, .14); font-family: var(--nx-mono); font-size: 11.5px; color: #5b6378; } .wu-pvbar2 i { width: 10px; height: 10px; border-radius: 50%; background: #2a3042; } .wu-pvbar2 span { margin-left: 8px; }
.wu-play-out iframe { flex: 1; width: 100%; min-height: 240px; border: 0; background: #fff; }
.wu-console { background: #06070b; border-top: 1px solid rgba(160, 180, 255, .14); max-height: 150px; display: flex; flex-direction: column; }
.wu-console .h { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px; font-family: var(--nx-mono); font-size: 11px; color: #5b6378; background: #0b0d14; } .wu-console .h button { background: none; border: 0; color: #5b6378; font-family: var(--nx-mono); font-size: 11px; cursor: pointer; } .wu-console .h button:hover { color: #c6ff3d; }
.wu-console .l { font-family: var(--nx-mono); font-size: 12.5px; padding: 6px 12px 8px; overflow: auto; color: #c3cbe0; line-height: 1.7; min-height: 52px; scrollbar-width: thin; scrollbar-color: #3a4260 #06070b; }
.wu-console .l .d { color: #4d5670; } .wu-console .l .error { color: #ff6b8b; } .wu-console .l .warn { color: #ffd23d; } .wu-console .l .log { color: #c6ff3d; }
.wu-play-foot { padding: 12px 16px 14px; background: #f4f6fb; border-top: 1px solid #1b2033; }
.wu-play-foot .task { font-size: 14.5px; line-height: 1.8; color: #2b3350; } .wu-play-foot .task i { color: #3d7a00; margin-right: 6px; }
.wu-play-foot .wu-checks { margin-top: 10px; } .wu-play-foot .wu-checks li small { opacity: .6; margin-left: 6px; font-family: var(--nx-mono); }
.wu-max-on.wu-play { display: flex !important; flex-direction: column; } .wu-max-on.wu-play .wu-play-grid { flex: 1; min-height: 0; } .wu-max-on.wu-play textarea { min-height: 0; height: 100%; } .wu-max-on.wu-play .wu-play-ed, .wu-max-on.wu-play .wu-play-out { min-height: 0; } .wu-max-on.wu-play iframe { min-height: 0; } .wu-max-on.wu-play .wu-console { max-height: 30%; }
/* 語法目錄 */
.wu-catlist { border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 12px 30px -20px rgba(20, 30, 80, .4); max-height: 640px; overflow-y: auto; }
.wu-cathd { position: sticky; top: 0; z-index: 2; padding: 9px 18px; background: #eef3e4; color: #3d7a00; font-family: var(--nx-mono); font-size: 12px; font-weight: 700; letter-spacing: .08em; border-bottom: 1px solid var(--nx-line); }
.wu-catrow { display: grid; grid-template-columns: 200px minmax(0, 1fr) 150px; gap: 16px; padding: 14px 18px; border-bottom: 1px solid var(--nx-line); align-items: start; transition: background .2s; }
.wu-catrow:hover { background: #f8faff; } .wu-catrow:last-child { border-bottom: 0; }
@media (max-width: 860px) { .wu-catrow { grid-template-columns: 1fr; gap: 8px; } }
.wu-catrow .nm code { font-size: 13.5px !important; word-break: break-all; font-weight: 700; }
.wu-catrow .ds p { margin: 0 0 8px !important; font-size: 14.5px !important; line-height: 1.75 !important; color: #2b3350 !important; }
.wu-catrow .ds pre { margin: 0; padding: 10px 12px; border-radius: 10px; background: #0b0d14; color: #c3cbe0; font-family: var(--nx-mono); font-size: 12px; line-height: 1.7; overflow-x: auto; max-height: 150px; }
.wu-catrow .bt { display: grid; gap: 6px; align-content: start; }
.wu-catrow .bt button { font-family: var(--nx-mono); font-size: 12px; padding: 7px 10px; border-radius: 8px; cursor: pointer; border: 1px solid var(--nx-line); background: #fff; color: var(--nx-dim); display: inline-flex; gap: 6px; align-items: center; justify-content: center; transition: all .2s; }
.wu-catrow .bt .try { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; font-weight: 700; } .wu-catrow .bt .try:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .5); } .wu-catrow .bt .ai:hover { border-color: #3d7a00; color: #3d7a00; }
.wu-cat .wu-resbar { margin-top: 0; }
/* 舊→新對照 */
.wu-oldnew td:nth-child(2) code { color: #a01851; background: #fde9f1; border-color: #f0b8cf; text-decoration: line-through; text-decoration-color: rgba(160, 24, 81, .4); }
.wu-oldnew td:nth-child(3) code { color: #2f6300; }
/* 小工具 */
.wu-tc textarea { width: 100%; min-height: 130px; font-family: var(--nx-mono); font-size: 13.5px; line-height: 1.8; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--nx-line); background: #0b0d14; color: #c6ff3d; resize: vertical; outline: 0; tab-size: 2; }
.wu-tc textarea:focus { border-color: #c6ff3d; }
.wu-seldom { border: 1.5px dashed #b9c1d6; border-radius: 14px; padding: 16px 18px; background: #fff; font-size: 14.5px; line-height: 1.8; color: #2b3350; }
.wu-seldom header, .wu-seldom main, .wu-seldom section, .wu-seldom nav { display: block; border: 1px solid #e6e9f2; border-radius: 8px; padding: 8px 12px; margin: 6px 0; background: #fafbfe; } .wu-seldom ul { list-style: none; display: flex; gap: 8px; padding: 0; margin: 4px 0; } .wu-seldom li { padding: 2px 12px; border-radius: 999px; background: #eef2fb; } .wu-seldom h1, .wu-seldom h2 { font-size: 18px; margin: 0 0 4px; color: #0b1020; font-family: var(--nx-display); } .wu-seldom p { margin: 4px 0 !important; font-size: 14.5px !important; } .wu-seldom a { color: #0b6da8; }
.wu-seldom .sel-hit { outline: 3px dashed #8b3dff; outline-offset: 2px; background: rgba(139, 61, 255, .12) !important; }
.wu-selgrid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; margin-top: 14px; align-items: start; } @media (max-width: 860px) { .wu-selgrid { grid-template-columns: 1fr; } }
.wu-conv { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; } @media (max-width: 860px) { .wu-conv { grid-template-columns: 1fr; } }
.wu-conv .sw { height: 110px; border-radius: 14px; border: 1px solid var(--nx-line); margin-bottom: 12px; transition: background .2s; }
.wu-conv .r { display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px dashed var(--nx-line); font-size: 13.5px; color: var(--nx-dim); } .wu-conv .r button { font-family: var(--nx-mono); font-size: 11.5px; border: 1px solid var(--nx-line); background: #fff; border-radius: 6px; padding: 3px 9px; cursor: pointer; }
.wu-conv .con { margin-top: 10px; font-size: 14px; color: #2b3350; line-height: 1.8; background: #eef3e4; border-radius: 10px; padding: 10px 14px; }
.wu-un { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; } .wu-un > div { border: 1px solid var(--nx-line); border-radius: 10px; padding: 8px 12px; background: #f8f9fc; } .wu-un small { display: block; font-size: 11px; color: var(--nx-faint); font-family: var(--nx-mono); } .wu-un b { font-family: var(--nx-display); font-size: 18px; color: #0b1020; }
.wu-bm { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: stretch; } @media (max-width: 860px) { .wu-bm { grid-template-columns: 1fr; } }
.wu-bmstage { border-radius: 16px; border: 1px solid var(--nx-line); background: #fff; min-height: 300px; display: grid; place-items: center; padding: 10px; overflow: auto; }
.wu-bmwrap { background: repeating-linear-gradient(45deg, #ffe7c9 0 6px, #ffd9a6 6px 12px); position: relative; border-radius: 6px; } .wu-bmwrap::before { content: "margin"; position: absolute; left: 6px; top: 2px; font: 700 10px var(--nx-mono); color: #a85a00; }
.wu-bmbox { background: #bfeab1; border: 0 solid #3a63e0; position: relative; } .wu-bmbox::before { content: "padding"; position: absolute; left: 4px; top: 1px; font: 700 10px var(--nx-mono); color: #2a6b00; } .wu-bmbox .ct { background: #b8d4ff; min-height: 60px; display: grid; place-items: center; font: 700 12px var(--nx-mono); color: #1d3b8b; text-align: center; }
.wu-fx { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 18px; } @media (max-width: 860px) { .wu-fx { grid-template-columns: 1fr; } }
.wu-fxbox { border: 1.5px dashed #b9c1d6; border-radius: 14px; background: #fff; min-height: 260px; padding: 12px; } .wu-fxbox > div { background: linear-gradient(135deg, #3a63e0, #8b3dff); color: #fff; font: 700 15px var(--nx-mono); display: grid; place-items: center; min-width: 52px; min-height: 44px; border-radius: 10px; padding: 0 14px; }
.wu-sel2 { display: grid; gap: 4px; font-size: 13px; font-weight: 700; color: #141a2e; }
.wu-grid3b { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } @media (max-width: 640px) { .wu-grid3b { grid-template-columns: 1fr 1fr; } }

/* 可拖拉的左右分隔線 */
.wu-split { display: none; }
@media (min-width: 901px) {
  .wu-bench-grid, .wu-live-grid, .wu-play-grid { grid-template-columns: minmax(0, var(--lw, 50%)) 10px minmax(0, 1fr); }
  .wu-split { display: flex; align-items: center; justify-content: center; cursor: col-resize; background: #0f121b; border-left: 1px solid rgba(160, 180, 255, .14); border-right: 1px solid rgba(160, 180, 255, .14); touch-action: none; user-select: none; transition: background .2s; z-index: 3; }
  .wu-split i { width: 3px; height: 44px; border-radius: 3px; background: #3a4260; transition: all .2s; }
  .wu-split:hover, .wu-split:focus-visible, .is-drag > .wu-split { background: #1a2036; outline: 0; } .wu-split:hover i, .wu-split:focus-visible i, .is-drag > .wu-split i { background: #c6ff3d; height: 72px; box-shadow: 0 0 10px rgba(198, 255, 61, .6); }
  .wu-edwrap, .wu-ed, .wu-play-ed { border-right: 0 !important; }
}
.is-drag { user-select: none; cursor: col-resize; } .is-drag iframe { pointer-events: none; }
.wu-legend2 em { font-style: normal; color: #8d96ad; margin-left: 10px; }

/* 自動提示與色彩提示 */
.wu-ac { position: fixed; z-index: 5000; width: 280px; max-height: 300px; overflow-y: auto; background: #10131c; border: 1px solid rgba(160, 180, 255, .3); border-radius: 12px; box-shadow: 0 24px 50px -10px rgba(0, 0, 0, .7); padding: 4px; font-family: var(--nx-mono); scrollbar-width: thin; scrollbar-color: #3a4260 #10131c; }
.wu-ac[hidden], .wu-colorchip[hidden] { display: none; }
.wu-ac .hd { font-size: 10.5px; color: #5b6378; padding: 4px 8px 6px; border-bottom: 1px solid rgba(160, 180, 255, .12); margin-bottom: 3px; }
.wu-ac .it { display: flex; gap: 10px; justify-content: space-between; align-items: center; padding: 6px 10px; border-radius: 8px; cursor: pointer; }
.wu-ac .it code { font-size: 12.5px; color: #c6ff3d; background: none; border: 0; padding: 0; white-space: nowrap; }
.wu-ac .it small { font-size: 11px; color: #8d96ad; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--nx-sans); }
.wu-ac .it.on, .wu-ac .it:hover { background: #c6ff3d; } .wu-ac .it.on code, .wu-ac .it:hover code { color: #06070b; font-weight: 700; } .wu-ac .it.on small, .wu-ac .it:hover small { color: #2b3350; }
.wu-colorchip { position: fixed; z-index: 5001; display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; border-radius: 999px; border: 1px solid #c6ff3d; background: #0b0d14; color: #c6ff3d; font-family: var(--nx-mono); font-size: 12px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px -8px rgba(0, 0, 0, .7); animation: wuPop .2s var(--nx-ease); }
.wu-colorchip:hover { background: #c6ff3d; color: #06070b; } .wu-colorchip .sw { width: 20px; height: 20px; border-radius: 50%; border: 2px solid #fff; display: inline-block; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); }
.wu-colorinp { position: fixed; z-index: 5002; width: 1px; height: 1px; opacity: 0; border: 0; padding: 0; pointer-events: none; }
.wu-files { display: flex; gap: 6px; padding: 8px 12px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); flex-wrap: wrap; }
.wu-files[hidden] { display: none; }
.wu-files button { font-family: var(--nx-mono); font-size: 12px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .22); border-radius: 8px; padding: 5px 12px; cursor: pointer; display: inline-flex; gap: 6px; align-items: center; }
.wu-files button[aria-pressed="true"] { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; font-weight: 700; }
.wu-files button .dot { width: 6px; height: 6px; border-radius: 50%; background: #c6ff3d; } .wu-files button[aria-pressed="true"] .dot { background: #06070b; }
.wu-files .tip { margin-left: auto; font-size: 11px; color: #5b6378; align-self: center; font-family: var(--nx-sans); }
.wu-ac .hd { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 語法目錄：卡片版面（更好讀） */
.wu-catgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
@media (max-width: 900px) { .wu-catgrid { grid-template-columns: 1fr; } }
.wu-cathd { grid-column: 1 / -1; position: static; display: flex; align-items: center; gap: 12px; padding: 4px 0 0; background: none; border: 0; font-family: var(--nx-display); font-size: 18px; letter-spacing: 0; color: #0b1020; font-weight: 700; margin-top: 8px; }
.wu-cathd::after { content: ""; flex: 1; height: 1px; background: var(--nx-line); }
.wu-cathd::before { content: ""; width: 6px; height: 22px; border-radius: 4px; background: #3d7a00; }
.wu-catcard { display: flex; flex-direction: column; gap: 10px; border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; padding: 18px 20px 16px; box-shadow: 0 10px 26px -18px rgba(20, 30, 80, .4); transition: border-color .2s, transform .2s var(--nx-ease), box-shadow .2s; }
.wu-catcard:hover { border-color: rgba(61, 122, 0, .5); transform: translateY(-3px); box-shadow: 0 18px 34px -18px rgba(20, 30, 80, .45); }
.wu-catcard header { display: flex; }
.wu-catcard .tg { font-size: 17px !important; font-weight: 700; color: #1f4d00 !important; background: #eaf6d6 !important; border: 1px solid #bfe08a !important; padding: 4px 12px !important; border-radius: 10px !important; word-break: break-all; }
.wu-catcard .ds { margin: 0 !important; font-size: 15.5px !important; line-height: 1.85 !important; color: #2b3350 !important; flex: 0 0 auto; }
.wu-catcard .cd { margin: 0; padding: 12px 14px; border-radius: 12px; background: #0b0d14; color: #c3cbe0; font-family: var(--nx-mono); font-size: 13px; line-height: 1.8; white-space: pre-wrap; word-break: break-word; flex: 1; max-height: 220px; overflow: auto; scrollbar-width: thin; scrollbar-color: #3a4260 #0b0d14; }
.wu-catcard .cd .t { color: #ff7ab2; } .wu-catcard .cd .a { color: #3df0ff; } .wu-catcard .cd .s { color: #c6ff3d; } .wu-catcard .cd .p { color: #82a8ff; } .wu-catcard .cd .c { color: #5b6378; }
.wu-catcard footer { display: flex; gap: 8px; flex-wrap: wrap; }
.wu-catcard footer button { font-family: var(--nx-sans); font-size: 13.5px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; border: 1px solid var(--nx-line); background: #fff; color: #2b3350; display: inline-flex; gap: 6px; align-items: center; transition: all .2s; }
.wu-catcard footer .try { flex: 1; justify-content: center; background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; } .wu-catcard footer .try:hover { box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .55); transform: translateY(-1px); }
.wu-catcard footer .ai:hover { border-color: #3d7a00; color: #3d7a00; }
.wu-catmore { text-align: center; margin-top: 18px; } .wu-catmore button { font-family: var(--nx-sans); font-size: 15px; font-weight: 700; padding: 12px 28px; border-radius: 999px; border: 1.5px solid #0b0d14; background: #fff; color: #0b0d14; cursor: pointer; transition: all .2s; } .wu-catmore button:hover { background: #0b0d14; color: #c6ff3d; }