/* =========================================================
   UNIT 07 OnePage 工具箱：RWD × jQuery × 圖示字體（前綴 w7-）
   需搭配 web-neo.css、web-unit.css（.wu-light）、web06-plan.css（wp- 共用按鈕）
   ========================================================= */
.w7-range { display: grid; grid-template-columns: 70px minmax(0, 1fr) 64px; gap: 10px; align-items: center; font-size: 13.5px; font-weight: 700; color: #2b3350; margin: 8px 0; }
.w7-range b { font-family: var(--nx-mono); font-size: 12.5px; color: #3d7a00; text-align: right; }
.w7-range input[type=range] { width: 100%; accent-color: #3d7a00; }
.w7-range input[type=color] { width: 44px; height: 30px; border: 0; padding: 0; background: none; cursor: pointer; }
.w7-sw { display: inline-flex; gap: 6px; align-items: center; font-size: 13.5px; color: #2b3350; cursor: pointer; margin: 6px 14px 0 0; }
.w7-sw input { accent-color: #3d7a00; }
.wp-note.ok { color: #2f6300; }

/* 總覽 */
.w7-four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0 20px; }
@media (max-width: 980px) { .w7-four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .w7-four { grid-template-columns: minmax(0, 1fr); } }
.w7-four .wu-card { text-decoration: none !important; color: inherit !important; display: flex; flex-direction: column; }
.w7-four .wu-card p { flex: 1; }
.w7-four .q { margin-top: 10px; font-size: 12.5px; color: #3a63e0; font-weight: 700; }

/* RWD 模擬器 */
.w7-rwd-ctrl { display: grid; gap: 6px; margin-bottom: 12px; }
.w7-rwd-ctrl .wu-seg2 button { flex: none; padding: 7px 12px; }
.w7-rwd-stage { position: relative; background: repeating-linear-gradient(45deg, #eef1f7, #eef1f7 8px, #e8ecf4 8px, #e8ecf4 16px); border-radius: 14px; padding: 12px; overflow: hidden; transition: height .3s; }
.w7-rwd-frame { container-type: inline-size; background: #fff; border-radius: 10px; box-shadow: 0 16px 34px -18px rgba(20, 30, 80, .5); transform-origin: 0 0; height: 470px; overflow-x: hidden; overflow-y: auto; transition: width .3s var(--nx-ease); border: 1px solid rgba(18, 28, 64, .15); }
.w7-rwd-frame .pg { font-family: var(--nx-sans); color: #1d2233; }
.w7-rwd-frame .nv { display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: #0b0d14; color: #fff; }
.w7-rwd-frame .nv b { color: #c6ff3d; font-size: 15px; }
.w7-rwd-frame .lk { display: none; gap: 16px; font-size: 13px; } .w7-rwd-frame .lk a { color: #fff !important; text-decoration: none !important; }
.w7-rwd-frame .bg { font-size: 20px; }
.w7-rwd-frame .hero { background: linear-gradient(135deg, #3a63e0, #7b2ff7); color: #fff; text-align: center; padding: 34px 16px; }
.w7-rwd-frame .hero h6 { font-size: 22px; margin: 0 0 4px; color: #fff; font-weight: 700; }
.wu-light .w7-rwd-frame .hero p { margin: 0 !important; font-size: 13px !important; color: rgba(255, 255, 255, .85) !important; line-height: 1.6 !important; }
.w7-rwd-frame .cards { display: grid; grid-template-columns: 1fr; gap: 10px; padding: 16px; }
.w7-rwd-frame .cards div { border: 1px solid #dfe3ee; border-radius: 10px; padding: 16px; text-align: center; font-weight: 700; font-size: 14px; display: grid; gap: 6px; }
.w7-rwd-frame .cards i { font-size: 22px; color: #3a63e0; }
.w7-rwd-frame .gal { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 0 16px 16px; }
.w7-rwd-frame .gal span { aspect-ratio: 4 / 3; border-radius: 8px; background: #dfe6f7; display: grid; place-items: center; color: #6b7aa5; font-size: 13px; }
.w7-rwd-frame .ft { background: #15171f; color: #aaa; text-align: center; font-size: 12px; padding: 12px; }
@container (min-width: 768px) {
  .w7-rwd-frame:not(.norwd) .lk { display: flex; } .w7-rwd-frame:not(.norwd) .bg { display: none; }
  .w7-rwd-frame:not(.norwd) .cards { grid-template-columns: 1fr 1fr; }
  .w7-rwd-frame:not(.norwd) .gal { grid-template-columns: repeat(3, 1fr); }
}
@container (min-width: 1024px) {
  .w7-rwd-frame:not(.norwd) .cards { grid-template-columns: repeat(3, 1fr); }
  .w7-rwd-frame:not(.norwd) .gal { grid-template-columns: repeat(6, 1fr); }
  .w7-rwd-frame:not(.norwd) .hero { padding: 70px 16px; }
}
.w7-rwd-frame.norwd .lk { display: flex; } .w7-rwd-frame.norwd .bg { display: none; }
.w7-rwd-frame.norwd .cards { grid-template-columns: repeat(3, 1fr); } .w7-rwd-frame.norwd .gal { grid-template-columns: repeat(6, 1fr); }
.w7-rwd-out { margin-top: 10px; }
.w7-rwd-out .wu-code pre { font-size: 12.5px; }

/* 錨點示範 */
.w7-anc { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 820px) { .w7-anc { grid-template-columns: minmax(0, 1fr); } }
.w7-anc-site { position: relative; height: 320px; overflow-y: auto; border-radius: 12px; border: 1px solid var(--nx-line); background: #fff; }
.w7-anc-nav { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #0b0d14; }
.w7-anc-nav b { color: #c6ff3d; font-size: 14px; }
.w7-anc-nav span { display: flex; flex-wrap: wrap; gap: 2px; justify-content: flex-end; }
.w7-anc-nav { flex-wrap: wrap; gap: 4px; }
.w7-anc-nav a { color: #c3cbe0 !important; text-decoration: none !important; font-size: 13px; padding: 4px 9px; border-radius: 6px; cursor: pointer; }
.w7-anc-nav a.on { background: #c6ff3d; color: #06070b !important; font-weight: 700; }
.w7-anc-site section { min-height: 260px; padding: 26px 18px; }
.w7-anc-site h5 { font-size: 20px; font-weight: 700; margin: 0 0 4px; color: #0b1020; }
.wu-light .w7-anc-site p { font-size: 14px !important; margin: 0 !important; color: #57617c !important; font-family: var(--nx-mono); }
.w7-anc-site .s1 { background: #eef3ff; } .w7-anc-site .s2 { background: #fff6e8; } .w7-anc-site .s3 { background: #effbe9; } .w7-anc-site .s4 { background: #fdeef5; }
.w7-anc-side .wu-seg2 button { padding: 7px 4px; font-size: 13px; }
.w7-anc-side .wu-verdict { font-size: 15px; margin-top: 10px; font-family: var(--nx-mono); }

/* 語法解剖 */
.w7-anat { display: flex; flex-wrap: wrap; gap: 2px; padding: 16px 18px; border-radius: 12px; background: #0b0d14; font-family: var(--nx-mono); font-size: clamp(14px, 2.2vw, 19px); }
.w7-anat button { font: inherit; background: none; border: 0; color: #c3cbe0; padding: 3px 4px; border-radius: 5px; cursor: pointer; border-bottom: 2px dashed rgba(198, 255, 61, .35); white-space: pre; }
.w7-anat button:hover { background: rgba(198, 255, 61, .12); }
.w7-anat button.on { background: #c6ff3d; color: #06070b; border-bottom-color: transparent; }
.w7-anat-note { margin: 10px 0 4px; padding: 12px 16px; border-left: 4px solid #3d7a00; background: #f4f9ea; border-radius: 0 10px 10px 0; font-size: 15px; line-height: 1.8; color: #2b3350; }
.w7-anat-note b { display: block; font-family: var(--nx-mono); color: #2f6300; font-size: 14px; }
#anatEx button.on, #icCat button.on { background: #0b0d14; color: #c6ff3d; border-color: #0b0d14; }

/* 選擇器練習 */
.w7-dollar { font-size: 18px !important; background: none !important; border: 0 !important; color: #3d7a00 !important; padding: 0 !important; }
.w7-seldemo { margin-top: 12px; border: 1px solid var(--nx-line); border-radius: 12px; padding: 10px; background: #fafbfd; font-size: 13.5px; display: grid; gap: 8px; }
.w7-seldemo > * { border: 1.5px dashed #c9d0e0; border-radius: 9px; padding: 8px 10px; transition: all .2s; }
.w7-seldemo header { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.w7-seldemo nav { display: flex; gap: 6px; } .w7-seldemo nav a { padding: 2px 8px; border-radius: 6px; border: 1px solid #d5dbe8; color: #2b3350 !important; text-decoration: none !important; }
.w7-seldemo h5 { font-size: 14px; margin: 0 0 6px; font-weight: 700; color: #0b1020; }
.w7-seldemo .card { display: inline-block; padding: 8px 14px; margin: 0 6px 6px 0; border-radius: 8px; border: 1px solid #d5dbe8; background: #fff; }
.wu-light .w7-seldemo p { font-size: 13.5px !important; margin: 4px 0 0 !important; }
.w7-seldemo footer { display: flex; justify-content: space-between; align-items: center; }
.w7-seldemo .btn { font-size: 12.5px; padding: 3px 10px; border-radius: 6px; border: 1px solid #d5dbe8; background: #fff; }
.w7-seldemo .w7-hit { outline: 3px solid #3d7a00 !important; outline-offset: 2px; background: #eaf6d6 !important; box-shadow: 0 0 0 6px rgba(198, 255, 61, .4); }

/* 效果實驗室 */
.w7-lab-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 18px; }
@media (max-width: 900px) { .w7-lab-grid { grid-template-columns: minmax(0, 1fr); } }
.w7-lab .wp-lbl:first-child { margin-top: 0; }
.w7-fx { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.w7-fx button { text-align: left; border: 1.5px solid var(--nx-line); background: #fff; border-radius: 10px; padding: 6px 9px; cursor: pointer; transition: all .15s; }
.w7-fx button code { display: block; font-size: 12px !important; background: none !important; border: 0 !important; padding: 0 !important; color: #3a63e0 !important; }
.w7-fx button span { font-size: 12px; color: var(--nx-dim); }
.w7-fx button:hover { border-color: #3d7a00; }
.w7-fx button[aria-pressed="true"] { background: #0b0d14; border-color: #0b0d14; } .w7-fx button[aria-pressed="true"] code { color: #c6ff3d !important; } .w7-fx button[aria-pressed="true"] span { color: #c3cbe0; }
.w7-lab .wu-seg2 button { font-size: 12.5px; padding: 7px 4px; }
.w7-stage { position: relative; border-radius: 14px; background: linear-gradient(160deg, #f4f6fb, #e9eefb); border: 1px solid var(--nx-line); padding: 14px; min-height: 230px; }
.w7-stage h5 { font-size: 15px; font-weight: 700; margin: 0 0 8px; color: #0b1020; display: inline-block; padding: 4px 10px; border-radius: 8px; border: 1.5px dashed transparent; }
.w7-stbtn { float: right; font-size: 12.5px; padding: 5px 12px; border-radius: 8px; border: 1.5px dashed transparent; background: #0b0d14; color: #c6ff3d; cursor: pointer; }
.w7-stage.arm-click .w7-stbtn { border-color: #ff4fa3; animation: w7pulse 1.2s infinite; }
.w7-stage.arm-hover h5 { border-color: #ff4fa3; animation: w7pulse 1.2s infinite; }
@keyframes w7pulse { 50% { box-shadow: 0 0 0 6px rgba(255, 79, 163, .25); } }
@media (prefers-reduced-motion: reduce) { .w7-stage.arm-click .w7-stbtn, .w7-stage.arm-hover h5 { animation: none; } }
.w7-boxes { clear: both; display: flex; gap: 14px; flex-wrap: wrap; padding-top: 14px; min-height: 120px; align-items: flex-start; }
.w7-stage .box { width: 92px; height: 92px; border-radius: 14px; background: #3a63e0; color: #fff; display: grid; place-items: center; font-family: var(--nx-mono); font-weight: 700; transition: border-radius .3s, background .3s; }
.w7-stage .box#c { background: #ff7a45; }
.w7-stage .box.round { border-radius: 50%; background: #3d7a00; }
.wu-light p.w7-fxdesc { font-size: 14px !important; margin: 10px 0 0 !important; color: #2b3350 !important; }

/* 範例遊樂場 */
.w7-recipes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0; }
@media (max-width: 820px) { .w7-recipes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.w7-recipes button { text-align: left; border: 1.5px solid var(--nx-line); background: #fff; border-radius: 12px; padding: 10px 12px; cursor: pointer; display: grid; grid-template-columns: 28px 1fr; gap: 0 8px; transition: all .15s; }
.w7-recipes i { grid-row: span 2; font-size: 18px; color: #3a63e0; margin-top: 3px; }
.w7-recipes b { font-size: 14px; color: #0b1020; } .w7-recipes span { font-size: 12px; color: var(--nx-dim); line-height: 1.5; }
.w7-recipes button:hover { border-color: #3d7a00; }
.w7-recipes button[aria-pressed="true"] { background: #0b0d14; border-color: #0b0d14; } .w7-recipes button[aria-pressed="true"] b { color: #c6ff3d; } .w7-recipes button[aria-pressed="true"] span { color: #c3cbe0; } .w7-recipes button[aria-pressed="true"] i { color: #c6ff3d; }
.w7-play { border: 1px solid #1b2033; border-radius: 16px; overflow: hidden; background: #0b0d14; box-shadow: 0 24px 50px -26px rgba(6, 7, 11, .7); }
.w7-play-bar { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; align-items: center; padding: 8px 12px; background: #0f121b; border-bottom: 1px solid rgba(160, 180, 255, .14); }
.w7-play-bar .grp { display: flex; gap: 6px; flex-wrap: wrap; }
.w7-play-bar .act { font-family: var(--nx-mono); font-size: 12px; color: #c3cbe0; background: transparent; border: 1px solid rgba(160, 180, 255, .2); padding: 6px 11px; border-radius: 8px; cursor: pointer; display: inline-flex; gap: 5px; align-items: center; }
.w7-play-bar .act:hover { background: #c6ff3d; color: #06070b; border-color: #c6ff3d; }
.w7-play-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 380px; }
@media (max-width: 860px) { .w7-play-grid { grid-template-columns: minmax(0, 1fr); } .w7-play-grid iframe { height: 340px; } }
.w7-play-grid textarea { width: 100%; min-height: 380px; resize: vertical; border: 0; outline: 0; background: #0b0d14; color: #e8ecf6; font-family: var(--nx-mono); font-size: 13px; line-height: 1.7; padding: 14px 16px; tab-size: 2; border-right: 1px solid rgba(160, 180, 255, .14); }
.w7-play-grid iframe { width: 100%; height: 100%; min-height: 380px; border: 0; background: #fff; }
.w7-task { border: 1px dashed rgba(61, 122, 0, .45); background: #f4f9ea; border-radius: 14px; padding: 12px 16px; margin-top: 12px; }
.w7-task > b { display: flex; gap: 6px; color: #2f6300; font-size: 14.5px; }
.w7-task ul { list-style: none; padding: 0; margin: 8px 0 4px; display: grid; gap: 4px; }
.w7-task label { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; color: #2b3350; cursor: pointer; line-height: 1.6; }
.w7-task input { accent-color: #3d7a00; margin-top: 5px; }
.w7-task input:checked + span { text-decoration: line-through; color: var(--nx-faint); }
.wu-light .w7-task p { font-size: 13px !important; margin: 0 !important; color: var(--nx-dim) !important; }

/* CSS3 產生器 */
.w7-c3 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 820px) { .w7-c3 { grid-template-columns: minmax(0, 1fr); } }
.w7-c3 .wu-seg2 button { font-size: 12.5px; padding: 7px 4px; }
.w7-c3-colors { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 4px; font-size: 13px; color: #2b3350; font-weight: 700; }
.w7-c3-colors label { display: inline-flex; gap: 6px; align-items: center; } .w7-c3-colors input { width: 38px; height: 28px; border: 0; padding: 0; background: none; cursor: pointer; }
.w7-c3-stage { display: grid; place-items: center; min-height: 240px; border-radius: 14px; background: repeating-conic-gradient(#eef1f7 0 25%, #fff 0 50%) 50% / 24px 24px; border: 1px solid var(--nx-line); }
.w7-c3-box { width: 200px; height: 130px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; }

/* keyframes */
.w7-kf { border: 1px solid var(--nx-line); border-radius: 16px; background: #fff; padding: 14px; margin: 14px 0 22px; }
.w7-kf-stage { overflow: hidden; border-radius: 12px; background: linear-gradient(135deg, #0b0d14, #1b2a6b); min-height: 130px; display: grid; place-items: center; padding: 20px; }
.w7-kf-stage h4 { color: #c6ff3d !important; font-family: var(--nx-display); font-size: clamp(22px, 4vw, 34px); margin: 0; }
.w7-kf-ctrl { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto; gap: 12px; align-items: center; margin: 12px 0 0; }
@media (max-width: 760px) { .w7-kf-ctrl { grid-template-columns: minmax(0, 1fr); } }
.w7-kf-ctrl .wu-seg2 button { font-size: 12.5px; padding: 7px 4px; }
.w7-kf .wu-code { margin-bottom: 0; }

/* 圖示探索器 */
.w7-ic { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 860px) { .w7-ic { grid-template-columns: minmax(0, 1fr); } }
#icQ { font-family: var(--nx-sans); }
.w7-ic-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; max-height: 330px; overflow-y: auto; margin-top: 8px; padding: 2px; }
.w7-ic-grid button { display: grid; gap: 4px; justify-items: center; padding: 10px 4px 6px; border-radius: 10px; border: 1.5px solid var(--nx-line); background: #fff; cursor: pointer; transition: all .15s; }
.w7-ic-grid button i { font-size: 20px; color: #2b3350; }
.w7-ic-grid button small { font-size: 11px; color: var(--nx-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.w7-ic-grid button:hover { border-color: #3a63e0; }
.w7-ic-grid button.on { background: #0b0d14; border-color: #0b0d14; } .w7-ic-grid button.on i { color: #c6ff3d; } .w7-ic-grid button.on small { color: #c3cbe0; }
.w7-ic-pv { display: grid; place-items: center; gap: 8px; min-height: 170px; border-radius: 14px; background: repeating-conic-gradient(#eef1f7 0 25%, #fff 0 50%) 50% / 20px 20px; border: 1px solid var(--nx-line); padding: 14px; }
.w7-ic-pv span { font-family: var(--nx-mono); font-size: 12.5px; color: var(--nx-dim); background: #fff; padding: 2px 8px; border-radius: 6px; }
.w7-ic-ctrl { margin-top: 8px; } .w7-ic-ctrl .wu-seg2 button { font-size: 12px; padding: 6px 2px; }

/* 社群按鈕 */
.w7-so-ctrl { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 12px 0; }
@media (max-width: 640px) { .w7-so-ctrl { grid-template-columns: minmax(0, 1fr); } }
.w7-so-ctrl .wu-seg2 button { font-size: 12.5px; padding: 7px 4px; }
.w7-so-pv { display: grid; place-items: center; min-height: 100px; border-radius: 14px; background: #f4f6fb; border: 1px solid var(--nx-line); padding: 16px; }
.w7-so-pv.dark { background: #15171f; }
.w7-so-pv a { text-decoration: none !important; }
#soList button i { margin-right: 2px; }

/* 資源連結 */
.w7-res { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 820px) { .w7-res { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .w7-res { grid-template-columns: minmax(0, 1fr); } }
.w7-res a { display: block; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--nx-line); background: #fff; text-decoration: none !important; transition: all .2s var(--nx-ease); }
.w7-res a:hover { border-color: #3d7a00; transform: translateY(-2px); box-shadow: 0 12px 24px -16px rgba(61, 122, 0, .6); }
.w7-res b { display: block; font-size: 14.5px; color: #0b1020; } .w7-res span { display: block; font-size: 12.5px; color: var(--nx-dim); line-height: 1.5; margin-top: 2px; }

@media (max-width: 520px) { .w7-fx { grid-template-columns: repeat(2, minmax(0, 1fr)); } .w7-anc-nav a { padding: 3px 6px; font-size: 12px; } .w7-range { grid-template-columns: 56px minmax(0, 1fr) 54px; } }
.wu-main .wu-steps code, .wu-main .wu-flow code { word-break: break-all; }