/* =====================================================================
   TECH ACADEMY — MODULE 3 (The Network Desk) lesson styles. All classes prefixed m3-
   ===================================================================== */

/* ---------- shared layout ---------- */
/* keep "No service" from sliding under the phone notch */
:is(.m3-split, .m3-mdm) .ph-status { padding-left: 16px; padding-right: 14px; }
:is(.m3-split, .m3-mdm) .ph-icons { gap: 3px; }
:is(.m3-split, .m3-mdm) .ph-gen { font-size: .6rem; white-space: nowrap; }
:is(.m3-split, .m3-mdm) .phone.m3-mini .ph-notch { width: 78px; }
.m3-split { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
.m3-split > .m3-col { flex: 1 1 380px; min-width: 0; }
.m3-two { justify-content: center; }
.m3-ok { color: #34c759 !important; }
.m3-back { color: #4da3ff; font-size: .85rem; cursor: pointer; margin: 2px 0 2px; }
.m3-chev { margin-left: auto; color: #8e96aa; font-size: .8rem; }
.m3-mini-btn { font: 700 .75rem var(--body); padding: 4px 10px; border-radius: 8px; border: 0; background: #0a84ff; color: #fff; cursor: pointer; }
.m3-seg { display: flex; gap: 6px; margin: 4px 0 10px; }
.m3-seg button { flex: 1; font: 700 .78rem var(--body); color: #cfd6e6; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.15); border-radius: 9px; padding: 7px 4px; cursor: pointer; line-height: 1.2; }
.m3-seg button small { font-weight: 400; color: #9aa4bd; font-size: .68rem; }
.m3-seg button.on { background: #0a84ff; border-color: #0a84ff; color: #fff; }
.m3-seg button.on small { color: #dbe9ff; }

/* ---------- learn-slide visuals ---------- */
.m3-vs { display: flex; align-items: center; gap: 18px; text-align: center; }
.m3-vs > div { display: flex; flex-direction: column; gap: 4px; }
.m3-vs .big-emoji { font-size: 70px; }
.m3-vs b { font-family: var(--display); }
.m3-vs small { color: var(--dim); max-width: 170px; }
.m3-vs-x { font: 900 1.6rem var(--display); color: var(--pink); }
.m3-gen { border-collapse: collapse; width: 100%; font-size: 1rem; }
.m3-gen th, .m3-gen td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; }
.m3-gen th { font: 700 .72rem var(--display); letter-spacing: .1em; color: var(--dim); text-transform: uppercase; }
.m3-gen tr:last-child td { color: var(--green); }
.m3-chain { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 12px; }
.m3-chain.col { flex-direction: column; align-items: stretch; width: 100%; max-width: 340px; }
.m3-chain span { padding: 8px 12px; border-radius: 10px; font-weight: 700; text-align: center; }
.m3-chain span.on { background: rgba(47,227,154,.15); color: var(--ok); border: 1px solid var(--ok); }
.m3-chain span.off { background: rgba(255,77,109,.12); color: #ff9db0; border: 1px solid var(--bad); text-decoration: line-through; }
.m3-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; width: 100%; }
.m3-steps li { counter-increment: s; position: relative; padding: 9px 12px 9px 50px; margin-bottom: 8px; border-radius: 12px; background: rgba(255,255,255,.04); border: 1px solid var(--line); }
.m3-steps li::before { content: counter(s); position: absolute; left: 10px; top: 50%; transform: translateY(-50%); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; font: 900 .95rem var(--display); background: var(--cyan); color: #061021; }
.m3-steps li b { display: block; }
.m3-steps li small { color: var(--dim); }
.m3-simbig { width: 150px; height: 200px; margin: 0 auto 12px; background: linear-gradient(160deg, #f1f3f7, #c8ced9); clip-path: polygon(0 0, 72% 0, 100% 20%, 100% 100%, 0 100%); border-radius: 10px; display: grid; place-items: center; }
.m3-simbig i { width: 86px; height: 100px; border-radius: 10px; background: linear-gradient(135deg, #f3d36b, #c99a2e); box-shadow: inset 0 0 0 3px #b08624; }
.m3-perm { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 300px; }
.m3-perm > div { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; border-radius: 10px; background: rgba(255,255,255,.05); }
.m3-sync-vis { display: flex; align-items: center; justify-content: center; gap: 22px; font-size: 64px; }
.m3-cloud { display: flex; flex-direction: column; align-items: center; font-size: 84px; animation: bob 2s ease-in-out infinite; }
.m3-cloud small { font: 700 .8rem var(--display); color: var(--cyan); }
.m3-capvis { width: 100%; }

/* ---------- L1 radios ---------- */
.m3-map { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m3-zone { position: relative; min-height: 150px; padding: 12px 14px; border-radius: 14px; cursor: pointer; background: var(--bg2); border: 2px solid var(--line); display: flex; flex-direction: column; gap: 2px; transition: border-color .15s, transform .15s; }
.m3-zone:hover { border-color: var(--cyan); transform: translateY(-2px); }
.m3-zone.here { border-color: var(--yellow); background: linear-gradient(160deg, rgba(255,210,61,.12), var(--bg2)); }
.m3-zone small { color: var(--dim); }
.m3-z-ic { font-size: 40px; }
.m3-z-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.m3-tag { font: 700 .72rem var(--body); padding: 3px 8px; border-radius: 999px; background: rgba(61,200,255,.12); color: var(--cyan); letter-spacing: 1px; }
.m3-tag.wifi { background: rgba(61,255,176,.12); color: var(--green); }
.m3-token { position: absolute; top: 10px; right: 12px; font-size: 40px; filter: drop-shadow(0 0 12px rgba(255,210,61,.8)); animation: bob 1.6s ease-in-out infinite; }
.m3-legend { margin-top: 12px; color: var(--dim); font-size: .92rem; }
.m3-speed { margin-top: 8px; padding: 12px; border-radius: 12px; background: rgba(255,255,255,.06); text-align: center; font-size: .82rem; animation: slideup .3s; }
.m3-speed.bad { color: #ff8da1; font-weight: 700; }
.m3-speed-n { font: 900 2rem var(--display); color: #34c759; }
.m3-speed-n small { font-size: .9rem; color: #9aa4bd; }
.m3-gauge { height: 8px; border-radius: 99px; background: rgba(255,255,255,.1); overflow: hidden; margin-bottom: 6px; }
.m3-gauge i { display: block; height: 100%; width: 40%; background: #0a84ff; border-radius: 99px; animation: m3-sweep 1s ease-in-out infinite; }
@keyframes m3-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(260%); } }

/* ---------- L2 SIM / eSIM ---------- */
.m3-bench { background: var(--bg2); border: 2px solid var(--line); border-radius: 16px; padding: 14px; }
.m3-edge { position: relative; display: flex; align-items: center; gap: 26px; height: 64px; padding: 0 24px; border-radius: 32px; background: linear-gradient(180deg, #4a5266, #2b3142 60%, #1d2230); box-shadow: inset 0 2px 0 rgba(255,255,255,.15); }
.m3-edge.demo { width: 100%; max-width: 420px; margin: 0 auto; }
.m3-hole { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; cursor: default; }
.m3-hole i { width: 9px; height: 9px; border-radius: 50%; background: #05070b; box-shadow: inset 0 1px 2px #000, 0 0 0 1px #5a6378; }
.m3-hole.pin i { width: 7px; height: 7px; }
.m3-tray-slot { position: relative; flex: 1; height: 26px; border-radius: 13px; border: 2px solid #7d8696; display: flex; align-items: center; justify-content: space-between; padding: 0 0 0 14px; transition: background .2s; }
.m3-tray-slot span { font: 700 .7rem var(--display); letter-spacing: .1em; color: #aab2c2; }
.m3-tray-slot.open { background: #05070b; border-style: dashed; }
.m3-tray-slot .m3-hole { margin-right: -4px; }
.m3-power { width: 44px; height: 22px; border-radius: 8px; border: 1px solid #8b93a3; background: #3d4456; color: #e4e9f3; font-size: .8rem; cursor: pointer; }
.m3-power:hover { background: #4f586e; }
.m3-trayout { display: flex; align-items: center; gap: 16px; margin: 12px 0 0 120px; padding: 12px 16px; border-radius: 14px; background: linear-gradient(180deg, #5a6378, #3d4456); width: max-content; animation: m3-slideout .35s ease-out; }
@keyframes m3-slideout { from { transform: translateY(-30px); opacity: 0; } }
.m3-recess { width: 74px; height: 98px; display: grid; place-items: center; background: #1a1e28; clip-path: polygon(0 0, 72% 0, 100% 20%, 100% 100%, 0 100%); border-radius: 6px; }
.m3-recess > span { font: 700 .62rem var(--display); color: #8b93a3; transform: translate(10px, -34px); }
.m3-tools { display: flex; align-items: flex-end; gap: 26px; margin-top: 18px; flex-wrap: wrap; min-height: 110px; }
.m3-tools small { display: block; color: var(--dim); font-size: .78rem; text-align: center; margin-top: 4px; }
.m3-pin { padding: 8px; border-radius: 10px; border: 1px dashed var(--line); }
.m3-pin:hover, .m3-simwrap .m3-sim:hover, .m3-qr:hover { filter: brightness(1.15); }
.m3-simwrap { display: flex; flex-direction: column; align-items: center; }
.m3-sim { width: 60px; height: 80px; display: grid; place-items: center; background: linear-gradient(160deg, #f1f3f7, #c8ced9); clip-path: polygon(0 0, 72% 0, 100% 20%, 100% 100%, 0 100%); border-radius: 5px; transition: transform .25s; }
.m3-sim i { width: 34px; height: 40px; border-radius: 6px; background: linear-gradient(135deg, #f3d36b, #c99a2e); box-shadow: inset 0 0 0 2px #b08624; pointer-events: none; }
.m3-sim.seated { width: 66px; height: 88px; cursor: pointer; }
.m3-crooked { transform: rotate(14deg) translate(6px, 4px) !important; box-shadow: 0 0 0 3px var(--bad); animation: wobble .6s infinite; }
.m3-qr { padding: 10px; border-radius: 12px; background: #fff; color: #222; text-align: center; box-shadow: 0 8px 20px rgba(0,0,0,.4); }
.m3-qr small { color: #333 !important; }
.m3-qr svg { display: block; margin: 0 auto; pointer-events: none; }
.m3-viewfinder { height: 220px; margin-top: 8px; border-radius: 14px; background: #000; display: grid; place-items: center; text-align: center; color: #cfd6e6; font-size: .85rem; position: relative; border: 2px solid #333; }
.m3-viewfinder::before { content: ""; position: absolute; inset: 30px; border: 3px solid #ffd23d; border-radius: 12px; border-style: dashed; animation: pulse .8s infinite alternate; }
.m3-off { height: 100%; min-height: 400px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 54px; color: #444c5e; text-align: center; background: #000; margin: -8px -14px -14px; }
.m3-off div { font: 700 1rem var(--body); color: #8b93a3; }
.m3-off small { font-size: .75rem; color: #6b7387; max-width: 180px; }
.m3-nosim { margin: 4px 0 8px; padding: 8px 10px; border-radius: 10px; background: rgba(255,77,109,.18); color: #ff9db0; font-weight: 700; font-size: .85rem; text-align: center; }

/* ---------- L3 Bluetooth ---------- */
.m3-relphone .phone-screen { position: relative; }
.m3-spin::before { content: "◌ "; display: inline-block; animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.m3-player { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: rgba(255,255,255,.07); font-size: .85rem; }
.m3-player button { font: 700 .8rem var(--body); padding: 6px 12px; border-radius: 99px; border: 0; background: #34c759; color: #04210f; cursor: pointer; }
.m3-dialog { position: absolute; left: 10px; right: 10px; top: 120px; z-index: 5; background: #262c3d; border-radius: 16px; padding: 14px; box-shadow: 0 20px 50px rgba(0,0,0,.7); text-align: center; animation: pop .25s; }
.m3-dialog p { font-size: .8rem; color: #cfd6e6; margin: 6px 0 10px; }
.m3-dialog .ph-input { text-align: center; font-size: 1.2rem; letter-spacing: .3em; }
.m3-dlg-btns { display: flex; gap: 8px; margin-top: 6px; }
.m3-accs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.m3-acc { background: var(--bg2); border: 2px solid var(--line); border-radius: 16px; padding: 14px; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.m3-acc.playing { border-color: var(--green); box-shadow: 0 0 30px rgba(61,255,176,.3); }
.m3-acc small { color: var(--dim); }
.m3-acc-ic { font-size: 64px; position: relative; line-height: 1; }
.m3-notes { position: absolute; right: -24px; top: -6px; font-size: 26px; color: var(--green); animation: m3-notes 1s ease-in-out infinite; }
@keyframes m3-notes { 50% { transform: translateY(-10px) rotate(10deg); opacity: .6; } }
.m3-led { width: 16px; height: 16px; border-radius: 50%; background: #2a2f3c; border: 2px solid #444c5e; }
.m3-led.white { background: #f4f6fb; box-shadow: 0 0 10px #fff; }
.m3-led.pair { animation: m3-blink .5s steps(1) infinite; }
@keyframes m3-blink { 0% { background: #3d8bff; box-shadow: 0 0 14px #3d8bff; } 50% { background: #ff3d5a; box-shadow: 0 0 14px #ff3d5a; } }
.m3-hold { position: relative; overflow: hidden; width: 100%; font: 700 .9rem var(--body); color: var(--text); background: var(--panel2); border: 2px solid var(--line); border-radius: 12px; padding: 10px; cursor: pointer; touch-action: none; user-select: none; }
.m3-hold small { display: block; font-weight: 400; color: var(--dim); font-size: .72rem; }
.m3-hold-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: rgba(61,139,255,.35); pointer-events: none; }
.m3-hold.holding { border-color: #3d8bff; }
.m3-hold.holding .m3-hold-fill { width: 100%; transition: width 1.8s linear; }
.m3-manual { grid-column: 1 / -1; order: 3; font-size: .85rem; color: #33302a; background: #f5efdc; border-radius: 6px; padding: 10px 14px; transform: rotate(-.6deg); box-shadow: 0 6px 16px rgba(0,0,0,.4); line-height: 1.5; }
.m3-carscreen { width: 100%; min-height: 96px; border-radius: 10px; background: #050a14; border: 2px solid #1d3a6b; color: #7fd1ff; font-size: .85rem; padding: 10px; display: grid; place-items: center; line-height: 1.5; }
.m3-bigpin { font: 900 1.5rem var(--display); color: #fff; letter-spacing: .15em; }

/* ---------- L4 location ---------- */
.m3-lmap { position: relative; border-radius: 16px; overflow: hidden; border: 2px solid var(--line); }
.m3-lsvg { display: block; width: 100%; height: auto; }
.m3-emo { font-size: 22px; }
.m3-range { fill: rgba(255,170,60,.05); stroke: rgba(255,170,60,.35); stroke-width: 1.5; stroke-dasharray: 5 6; }
.m3-mall { font: 900 13px var(--display); fill: #d9c8f5; text-anchor: middle; }
.m3-satline { stroke: #7fe3ff; stroke-width: 2; stroke-dasharray: 6 5; animation: m3-dash 1s linear infinite; }
.m3-satline.blocked { stroke: #ff4d6d; opacity: .7; }
.m3-cellline { stroke: #ffaa3c; stroke-width: 3; stroke-dasharray: 3 6; animation: m3-dash 1s linear infinite; }
@keyframes m3-dash { to { stroke-dashoffset: -22; } }
.m3-x { fill: #ff4d6d; font-size: 18px; font-weight: 900; }
.m3-acc-c { fill: rgba(61,255,176,.18); stroke: #3dffb0; stroke-width: 2; animation: pulse .9s infinite alternate; }
.m3-acc-c.wide { fill: rgba(255,170,60,.14); stroke: #ffaa3c; }
.m3-spot { position: absolute; transform: translate(-50%, -100%); padding: 4px 8px 26px; cursor: pointer; text-align: center; min-width: 96px; border-radius: 10px; }
.m3-spot span { font: 700 .72rem var(--display); color: #fff; background: rgba(7,11,22,.75); padding: 3px 8px; border-radius: 99px; white-space: nowrap; }
.m3-spot:hover span { background: var(--cyan); color: #061021; }
.m3-spot.here span { background: var(--yellow); color: #061021; }
.m3-person { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); font-size: 34px; filter: drop-shadow(0 0 10px rgba(255,210,61,.9)); }
.m3-readout { margin-top: 12px; padding: 12px 16px; border-radius: 14px; background: var(--bg2); border: 1px solid var(--line); display: grid; gap: 4px; }
.m3-fix { margin-top: 4px; font: 700 1.05rem var(--body); color: var(--yellow); }

/* ---------- L5 MDM ---------- */
.m3-mdm { display: grid; grid-template-columns: minmax(340px, 1fr) auto; gap: 16px; align-items: start; }
.m3-console { background: #0b1222; border: 2px solid #24406e; border-radius: 16px; overflow: hidden; }
.m3-con-head { font: 900 .95rem var(--display); padding: 10px 14px; background: linear-gradient(90deg, #1d3a6b, #142a50); letter-spacing: .05em; }
.m3-sec { padding: 10px 14px; border-top: 1px solid #1d2a44; transition: opacity .3s; }
.m3-sec.m3-lock { opacity: .4; pointer-events: none; }
.m3-sec-t { font: 700 .74rem var(--display); letter-spacing: .1em; color: var(--cyan); text-transform: uppercase; margin-bottom: 6px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.m3-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; }
.m3-row > div { flex: 1 1 150px; }
.m3-row small { display: block; color: var(--dim); font-size: .78rem; }
.m3-row .chip-btn, .m3-sec > .chip-btn { padding: 6px 10px; font-size: .8rem; }
.m3-badge { font: 700 .72rem var(--body); padding: 3px 9px; border-radius: 99px; background: rgba(255,255,255,.08); color: var(--dim); text-transform: capitalize; }
.m3-badge.ok { background: rgba(47,227,154,.15); color: var(--ok); text-transform: none; }
.m3-badge.bad { background: rgba(255,77,109,.18); color: #ff9db0; text-transform: none; }
.m3-chk { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; font-size: .92rem; }
.m3-chk input { width: 18px; height: 18px; accent-color: var(--cyan); }
.m3-alert { color: #fff; background: var(--bad); padding: 2px 10px; border-radius: 99px; text-transform: none; letter-spacing: 0; animation: blink .5s infinite alternate; }
.m3-phones { display: flex; gap: 12px; }
.m3-ph-wrap { display: flex; flex-direction: column; align-items: center; }
.phone.m3-mini { width: 204px; height: 450px; border-radius: 34px; border-width: 8px; }
.phone.m3-mini .phone-screen { padding: 6px 8px 10px; }
.phone.m3-mini .m3-apps { gap: 6px 2px; }
.phone.m3-mini .m3-app i { width: 34px; height: 34px; font-size: 18px; }
.phone.m3-mini .m3-photos { font-size: 19px; }
.m3-hello { height: 100%; min-height: 360px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 46px; gap: 4px; text-align: center; animation: fadein .5s; }
.m3-hello b { font: 700 1.4rem var(--body); }
.m3-hello small { font-size: .72rem; color: #9aa4bd; }
.m3-managed { font-size: .7rem; text-align: center; padding: 4px; border-radius: 8px; background: rgba(10,132,255,.2); color: #9cc9ff; margin-bottom: 8px; }
.m3-jail { font-size: .72rem; text-align: center; padding: 4px; border-radius: 8px; background: rgba(255,170,60,.2); color: #ffc98a; margin-bottom: 8px; }
.m3-apps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 4px; }
.m3-app { position: relative; display: flex; flex-direction: column; align-items: center; font-size: .6rem; color: #dfe5f2; }
.m3-app i { font-style: normal; width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font-size: 20px; background: rgba(255,255,255,.1); margin-bottom: 2px; }
.m3-app.new i { background: rgba(61,255,176,.25); animation: pop .4s; }
.m3-app.blocked i { filter: grayscale(1) brightness(.6); }
.m3-app em { position: absolute; top: -4px; right: 2px; font-style: normal; font-size: 14px; }
.m3-photos { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0; padding: 6px; border-radius: 10px; background: rgba(255,255,255,.05); font-size: 22px; min-height: 40px; }
.m3-photos small { font-size: .7rem; color: #8b93a3; }
.m3-flyaway span { animation: m3-fly .9s ease-in forwards; }
.m3-flyaway span:nth-child(2n) { animation-delay: .1s; } .m3-flyaway span:nth-child(3n) { animation-delay: .2s; }
@keyframes m3-fly { to { transform: translate(40px, -160px) rotate(180deg) scale(.2); opacity: 0; } }
.m3-work { margin-top: 6px; padding: 8px; border-radius: 12px; border: 2px dashed #0a84ff; background: rgba(10,132,255,.08); }
.m3-work > b { display: block; font-size: .72rem; color: #9cc9ff; margin-bottom: 6px; }

/* ---------- L6 sync & data caps ---------- */
.m3-plan p { margin: 6px 0; }
.m3-capbar { position: relative; height: 26px; border-radius: 99px; background: rgba(255,255,255,.07); margin: 10px 0 6px; overflow: visible; }
.m3-capfill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--green), var(--cyan)); transition: width .15s; }
.m3-capfill.over { background: linear-gradient(90deg, var(--orange), var(--bad)); }
.m3-capline { position: absolute; top: -6px; bottom: -6px; width: 3px; background: var(--yellow); }
.m3-capline span { position: absolute; top: -18px; left: -10px; font: 700 .7rem var(--display); color: var(--yellow); }
.m3-capnum { font-size: 1.05rem; margin-bottom: 10px; }
.m3-feats { display: grid; gap: 4px; margin-bottom: 12px; }
.m3-feat { display: flex; justify-content: space-between; padding: 6px 10px; border-radius: 8px; background: rgba(255,255,255,.04); font-size: .9rem; }
.m3-feat.wifi b { color: var(--green); }

@media (max-width: 1240px) {
  .m3-mdm { grid-template-columns: 1fr; }
  .m3-phones { justify-content: center; }
}
@media (max-width: 700px) {
  .m3-map, .m3-accs { grid-template-columns: 1fr; }
  .m3-trayout { margin-left: 0; }
  .m3-phones { flex-direction: column; align-items: center; }
}