/* =====================================================================
   TECH ACADEMY — Module 2 (Accessory Wall) lesson styles. All classes m2-*
   ===================================================================== */

/* ---------- shared bits ---------- */
.m2-cheat td, .m2-cheat th { font-size: .95rem; }
.m2-bt { font-family: var(--display); color: #3d8bff; font-weight: 900; }

/* ---------- L1 connector lab ---------- */
.m2-timeline { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.m2-timeline span { padding: 10px; border-radius: 10px; font-size: .9rem; }
.m2-tl-a { background: rgba(255,210,61,.12); border: 1px solid var(--yellow); }
.m2-tl-b { background: rgba(61,200,255,.12); border: 1px solid var(--cyan); }
.m2-ports { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 16px; }
.m2-port { text-align: center; background: #1a1e28; border: 3px solid #3a4256; border-radius: 16px; padding: 10px 8px; transition: border-color .2s, background .2s; }
.m2-port b { display: block; font-family: var(--display); font-size: .85rem; }
.m2-port.ok { border-color: var(--ok); background: rgba(47,227,154,.1); }
.m2-port.m2-wiggle { animation: m2wiggle .45s; border-color: var(--bad); }
@keyframes m2wiggle { 25% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } 75% { transform: rotate(-2deg); } }
.m2-port-face { height: 80px; display: flex; align-items: center; justify-content: center; }
.m2-port-svg { height: 72px; }
.m2-port-st { display: block; font-size: .8rem; color: var(--dim); margin-top: 4px; min-height: 1.2em; }
.m2-port.ok .m2-port-st { color: var(--ok); }
.m2-plugs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.m2-plugwrap { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.m2-plug { width: 100%; text-align: center; background: linear-gradient(180deg, #24335e, #172446); border: 2px solid var(--cyan); border-radius: 14px; padding: 8px; }
.m2-plug b { font-family: var(--display); font-size: .82rem; }
.m2-plug-art { height: 84px; display: flex; align-items: center; justify-content: center; }
.m2-plug-art svg { height: 80px; transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
.m2-plug.flipped .m2-plug-art svg { transform: rotate(180deg); }
.m2-plug.flipped .m2-plug-art svg text { display: none; }
.m2-ori { font-size: .78rem; color: var(--dim); }
.m2-part2 { margin-top: 22px; padding-top: 14px; border-top: 2px dashed var(--line); transition: opacity .4s, filter .4s; }
.m2-part2.m2-locked { opacity: .25; filter: grayscale(1); pointer-events: none; }
.m2-cables { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 14px; }
.m2-cable { width: 140px; text-align: center; background: var(--panel2); border: 2px solid var(--purple); border-radius: 12px; padding: 6px; }
.m2-cable b { font-family: var(--display); font-size: .8rem; }
.m2-cable-art svg { height: 56px; }
.m2-cable-art svg text { display: none; }
.m2-devs { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.m2-dev { background: #1a1e28; border: 2px dashed #4d5873; border-radius: 14px; padding: 12px; text-align: center; }
.m2-dev b { display: block; font-size: .92rem; }
.m2-dev-e { font-size: 40px; display: block; }
.m2-dev-st { display: block; font-size: .8rem; color: var(--dim); margin-top: 4px; }
.m2-dev.ok { border-style: solid; border-color: var(--ok); background: rgba(47,227,154,.1); }
.m2-dev.ok .m2-dev-st { color: var(--ok); font-weight: 700; }

/* ---------- L2 range lab ---------- */
.m2-rings { position: relative; width: 260px; height: 260px; display: grid; place-items: center; }
.m2-ring-dev { font-size: 64px; z-index: 2; }
.m2-rings i { position: absolute; border-radius: 50%; border: 3px solid; animation: m2ring 2.4s ease-out infinite; }
.m2-rings.nfc i { border-color: #3dffb0; width: 110px; height: 110px; }
.m2-rings.bt i { border-color: #3d8bff; width: 240px; height: 240px; }
.m2-rings i:nth-of-type(2) { animation-delay: .8s; } .m2-rings i:nth-of-type(3) { animation-delay: 1.6s; }
@keyframes m2ring { from { transform: scale(.4); opacity: 1; } to { transform: scale(1); opacity: 0; } }
.m2-ring-lbl { position: absolute; bottom: 0; font: 900 1.1rem var(--display); color: var(--yellow); }
.m2-track { width: 100%; height: auto; background: #0b1120; border-radius: 14px; border: 1px solid var(--line); }
.m2-dist { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin: 12px 0; color: var(--dim); font-size: .9rem; }
.m2-dist input { width: 100%; accent-color: var(--cyan); height: 28px; }
.m2-dist-read { grid-column: 1 / -1; text-align: center; font: 900 1.2rem var(--display); color: var(--yellow); }
.m2-devcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.m2-devcard { background: var(--bg2); border: 2px solid var(--line); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.m2-dc-h { font: 700 1rem var(--display); }
.m2-dc-h small { display: block; font: 600 .75rem var(--body); color: var(--dim); }
.m2-light { padding: 8px 10px; border-radius: 10px; background: rgba(255,255,255,.05); color: var(--dim); font-size: .9rem; }
.m2-light.on { background: rgba(47,227,154,.15); color: var(--ok); font-weight: 700; }
.m2-light.off { background: rgba(255,77,109,.14); color: var(--bad); font-weight: 700; }
.m2-notes { font-size: 20px; animation: m2float 1.4s ease-in-out infinite; }
@keyframes m2float { 50% { transform: translateY(-5px) rotate(4deg); } }

/* ---------- L3 tethering ---------- */
.m2-teth-vis { display: flex; align-items: center; gap: 14px; font-size: 64px; }
.m2-teth-vis i { font-style: normal; font-size: 36px; color: var(--cyan); animation: pulse .8s infinite alternate; }
.m2-three { grid-template-columns: 1fr; }
.m2-teth { display: grid; grid-template-columns: auto 1fr; gap: 20px; align-items: start; }
.m2-teth-right { display: flex; flex-direction: column; gap: 14px; }
.m2-conn { font-weight: 700; margin-bottom: 6px; }
.m2-plan { margin-top: 10px; font-size: .85rem; color: var(--dim); }
.m2-plan b { color: var(--text); }
.m2-hs { padding: 8px 10px 10px; }
.m2-hs label { display: block; margin-top: 6px; }
.m2-scen { padding: 10px 0; border-bottom: 1px dashed var(--line); display: flex; flex-direction: column; gap: 8px; }
.m2-scen:last-child { border-bottom: 0; }

/* ---------- L4 docking ---------- */
.m2-mess { font-size: 70px; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; max-width: 320px; }
.m2-mess span { font-size: 40px; animation: m2float 1.6s ease-in-out infinite; }
.m2-mess span:nth-child(2n) { animation-delay: .4s; }
.m2-boxvis { text-align: center; padding: 20px; border-radius: 18px; border: 3px solid; min-width: 280px; }
.m2-boxvis.pr { border-color: var(--purple); background: rgba(168,107,255,.1); }
.m2-boxvis.dock { border-color: var(--cyan); background: rgba(61,200,255,.1); }
.m2-boxvis b { font: 900 1.3rem var(--display); }
.m2-boxvis div { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 14px 0 8px; }
.m2-boxvis div span { padding: 6px 10px; border-radius: 8px; background: #05070b; border: 1px solid #4d5873; font-size: .85rem; }
.m2-boxvis small { color: var(--dim); }
.m2-job { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; background: var(--bg2); border: 2px solid var(--yellow); border-radius: 14px; padding: 12px 16px; margin-bottom: 12px; }
.m2-job-who { font: 900 1.2rem var(--display); }
.m2-job-who small { display: block; font: 600 .8rem var(--body); color: var(--dim); }
.m2-reqs { display: flex; flex-wrap: wrap; gap: 6px; }
.m2-req { padding: 5px 10px; border-radius: 999px; font-size: .85rem; border: 1px solid var(--line); }
.m2-req.ok { border-color: var(--ok); color: var(--ok); background: rgba(47,227,154,.1); }
.m2-req.no { color: var(--dim); }
.m2-hubpick { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.m2-hubopt { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 2px 12px; align-items: center; text-align: left; font: inherit; color: var(--text); background: var(--panel2); border: 2px solid var(--line); border-radius: 14px; padding: 12px 14px; cursor: pointer; }
.m2-hubopt:hover { border-color: var(--cyan); }
.m2-hubopt.sel { border-color: var(--yellow); background: rgba(255,210,61,.1); }
.m2-hub-e { font-size: 34px; grid-row: 1 / span 2; }
.m2-hubopt b { font-family: var(--display); }
.m2-price { font: 900 1.1rem var(--display); color: var(--yellow); }
.m2-hubopt small { grid-column: 2 / span 2; color: var(--dim); }
.m2-deskrow { display: grid; grid-template-columns: 120px 60px 1fr; align-items: center; margin-bottom: 12px; }
.m2-laptop { text-align: center; font-size: 46px; background: #1a1e28; border: 2px solid #4d5873; border-radius: 14px; padding: 10px; }
.m2-laptop b { display: block; font: 700 .9rem var(--display); }
.m2-laptop small { display: block; font-size: .72rem; color: var(--dim); }
.m2-wire { height: 6px; background: repeating-linear-gradient(90deg, var(--cyan) 0 10px, transparent 10px 16px); border-radius: 3px; animation: belt 1s linear infinite; }
.m2-hub { background: #10141f; border: 3px solid var(--cyan); border-radius: 16px; padding: 12px; }
.m2-hub-h { font: 900 1.05rem var(--display); margin-bottom: 8px; }
.m2-hports { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; }
.m2-hport { min-height: 64px; border: 2px dashed #4d5873; border-radius: 10px; padding: 6px 8px; display: flex; flex-direction: column; justify-content: center; gap: 2px; font-size: .85rem; }
.m2-hport small { font: 700 .7rem var(--display); color: var(--cyan); letter-spacing: .06em; }
.m2-hport.filled { border-style: solid; border-color: var(--ok); background: rgba(47,227,154,.1); }
.m2-charge { margin-top: 10px; padding: 6px 10px; border-radius: 8px; font-size: .9rem; }
.m2-charge.ok { background: rgba(47,227,154,.12); color: var(--ok); }
.m2-charge.no { background: rgba(255,77,109,.12); color: var(--bad); }
.m2-gear { display: flex; flex-wrap: wrap; gap: 10px; margin: 8px 0 14px; min-height: 48px; }
.m2-gearchip { padding: 10px 14px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--purple); font-weight: 700; }
.m2-brandq { margin-top: 16px; border-color: var(--yellow); }

/* ---------- L5 accessories ---------- */
.m2-mini-kbd { position: relative; width: 300px; padding: 14px; background: #262c3c; border-radius: 16px; }
.m2-mk-keys { display: grid; grid-template-columns: repeat(10, 1fr); gap: 4px; }
.m2-mk-keys i { height: 22px; background: #12151d; border-radius: 4px; }
.m2-mk-nub { position: absolute; left: 145px; top: 52px; width: 14px; height: 14px; border-radius: 50%; background: #e0263b; box-shadow: 0 0 12px #e0263b; }
.m2-mk-pad { margin: 12px auto 0; width: 140px; height: 70px; border-radius: 10px; background: #323a4f; border: 2px solid #4d5873; display: grid; place-items: center; color: var(--dim); font-size: .8rem; }
.m2-acc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.m2-station { display: flex; flex-direction: column; gap: 8px; }
.m2-wide { grid-column: 1 / -1; }
.m2-press { display: flex; align-items: center; gap: 10px; font-size: .9rem; color: var(--dim); }
.m2-press input { flex: 1; accent-color: var(--cyan); }
.m2-press b { color: var(--yellow); min-width: 60px; }
.m2-canvas { width: 100%; height: auto; border-radius: 12px; border: 2px solid #3a4256; cursor: crosshair; touch-action: none; background: #0b1020; }
.m2-kbd { position: relative; background: #262c3c; border-radius: 14px; padding: 10px; width: max-content; max-width: 100%; }
.m2-krow { display: flex; gap: 4px; margin-bottom: 4px; }
.m2-key { width: 38px; height: 34px; border-radius: 6px; background: #12151d; color: #8b93a3; display: grid; place-items: center; font: 700 .8rem var(--body); cursor: pointer; flex: none; }
.m2-key:hover { background: #1c2130; }
.m2-nub { position: absolute; left: 229px; top: 77px; width: 14px; height: 14px; border-radius: 50%; background: #e0263b; border: 2px solid #7a0f1c; cursor: pointer; z-index: 2; }
.m2-nub:hover { box-shadow: 0 0 0 6px rgba(224,38,59,.25); }
.m2-nub.found { box-shadow: 0 0 0 6px rgba(47,227,154,.4), 0 0 18px #3dffb0; }
.m2-tpad { width: 220px; height: 110px; margin: 10px 0 0 120px; border-radius: 14px; background: #323a4f; border: 2px solid #4d5873; cursor: pointer; }
.m2-tpad:hover { border-color: var(--cyan); }
.m2-tpad.found { border-color: var(--ok); box-shadow: 0 0 18px rgba(47,227,154,.5); }
.m2-lights { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.m2-lt { padding: 8px 10px; border-radius: 10px; font-size: .88rem; background: rgba(255,255,255,.04); }
.m2-lt.ok { background: rgba(47,227,154,.12); color: #bff7e0; }
.m2-lt.no { color: var(--dim); }
.m2-accs { display: flex; flex-wrap: wrap; gap: 8px; min-height: 46px; }
.m2-accchip { padding: 10px 14px; border-radius: 12px; background: var(--panel2); border: 2px solid var(--cyan); font-weight: 700; }
.m2-custs { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 10px; }
.m2-cust { border: 2px dashed #4d5873; border-radius: 12px; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; font-size: .92rem; }
.m2-cust > b { font-size: .8rem; color: var(--dim); }
.m2-cust.ok { border-style: solid; border-color: var(--ok); background: rgba(47,227,154,.08); }
.m2-cust.ok > b { color: var(--ok); }

@media (max-width: 1100px) {
  .m2-ports, .m2-plugs { grid-template-columns: repeat(2, 1fr); }
  .m2-devcards, .m2-acc, .m2-hubpick { grid-template-columns: 1fr; }
  .m2-teth { grid-template-columns: 1fr; justify-items: center; }
  .m2-deskrow { grid-template-columns: 1fr; gap: 8px; }
  .m2-wire { height: 30px; width: 6px; margin: 0 auto; }
}