/* MOTION — 3D ISO + scan tabs */
#motion{background:linear-gradient(180deg,var(--bg),var(--bg2))}
.mo-hd{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:32px}
.mo-tabs{display:flex;gap:4px;background:var(--gl);border:1px solid var(--gb);border-radius:12px;padding:4px;flex-shrink:0}
.mo-tab{padding:8px 16px;border-radius:9px;border:none;background:transparent;color:var(--ts);font-family:var(--fb);font-size:12px;font-weight:600;cursor:pointer;transition:all .3s var(--eo);letter-spacing:.3px;white-space:nowrap}
.mo-tab.act{background:linear-gradient(135deg,rgba(201,168,76,.12),rgba(201,168,76,.06));border:1px solid rgba(201,168,76,.28);color:var(--gold)}
.mo-pane{display:none}
.mo-pane.act{display:flex;gap:36px;align-items:flex-start}
@media(max-width:820px){.mo-pane.act{flex-direction:column}}
/* ISO 3D canvas wrap */
.iso-wrap{flex:1.5;position:relative;min-width:0;border-radius:20px;overflow:hidden;background:linear-gradient(145deg,rgba(8,8,18,.96),rgba(4,4,12,.98));border:1px solid rgba(255,255,255,.06)}
html[data-theme="light"] .iso-wrap{background:linear-gradient(145deg,rgba(232,226,214,.97),rgba(220,214,200,.99));border-color:rgba(0,0,0,.1)}
.iso-dev{position:absolute;transform:translate(-50%,-50%);pointer-events:all;cursor:pointer;z-index:4}
.iso-dev-pin{width:26px;height:26px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;background:rgba(0,0,0,.6);border:1px solid rgba(255,255,255,.2);transition:all .25s var(--eo);box-shadow:0 2px 8px rgba(0,0,0,.4)}
html[data-theme="light"] .iso-dev-pin{background:rgba(255,255,255,.85);border-color:rgba(0,0,0,.15);box-shadow:0 2px 8px rgba(0,0,0,.15)}
.iso-dev:hover .iso-dev-pin{transform:scale(1.4);background:rgba(201,168,76,.15);border-color:rgba(201,168,76,.6);box-shadow:0 4px 16px rgba(0,0,0,.3),0 0 12px rgba(201,168,76,.25)}
.iso-dev-tip{position:absolute;bottom:calc(100%+10px);left:50%;transform:translateX(-50%);background:rgba(5,5,14,.96);border:1px solid rgba(255,255,255,.14);color:#f0ece4;font-size:11px;font-family:var(--fb);font-weight:400;padding:8px 12px;border-radius:10px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .2s;z-index:10;line-height:1.6}
html[data-theme="light"] .iso-dev-tip{background:rgba(255,252,246,.98);border-color:rgba(0,0,0,.12);color:#12100d}
.iso-dev-tip::after{content:'';position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:rgba(5,5,14,.96)}
html[data-theme="light"] .iso-dev-tip::after{border-top-color:rgba(255,252,246,.98)}
.iso-dev-tip strong{display:block;font-weight:700;font-size:11px;margin-bottom:1px;color:var(--gold)}
.iso-dev:hover .iso-dev-tip,.iso-dev-tip.open{opacity:1}
.iso-legend{position:absolute;bottom:12px;left:12px;display:flex;gap:6px;flex-wrap:wrap}
.iso-leg-item{display:flex;align-items:center;gap:5px;background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.07);border-radius:6px;padding:3px 8px;font-size:9px;color:rgba(240,236,228,.6);font-family:var(--fb)}
html[data-theme="light"] .iso-leg-item{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.1);color:rgba(18,16,13,.65)}
.iso-leg-dot{width:7px;height:7px;border-radius:50%}
/* Event feed (right panel) */
.ev-panel{width:220px;flex-shrink:0;display:flex;flex-direction:column;gap:16px}
@media(max-width:820px){.ev-panel{width:100%}}
.ef-header{display:flex;align-items:center;gap:8px}
.ef-dot{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 8px rgba(76,175,80,.4);animation:dp 2s ease-in-out infinite;flex-shrink:0}
.ef-title{font-size:11px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--tm)}
.ef-list{display:flex;flex-direction:column;gap:6px}
.ef-item{display:flex;align-items:center;gap:10px;padding:10px 14px;border-radius:12px;background:var(--gl);border:1px solid var(--gb);transition:all .4s var(--eo);opacity:0;transform:translateX(12px)}
.ef-item.show{opacity:1;transform:translateX(0)}
.ef-item.active{background:var(--gs);border-color:rgba(201,168,76,.25)}
.ef-ic{font-size:15px;flex-shrink:0}
.ef-body{flex:1;min-width:0}
/* Demo control panel */
.demo-ctrl-list{display:flex;flex-direction:column;gap:7px}
.dc-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:11px;background:var(--gl);border:1px solid var(--gb);transition:all .3s var(--eo);cursor:pointer}
.dc-item:hover{background:var(--gs);border-color:rgba(201,168,76,.2)}
.dc-ic{font-size:16px;flex-shrink:0;width:28px;text-align:center}
.dc-body{flex:1;min-width:0}
.dc-name{font-size:11px;font-weight:700;color:var(--tp)}
.dc-room{font-size:10px;color:var(--tm);font-weight:300}
.dc-status{font-size:10px;font-weight:600;margin-left:auto;flex-shrink:0;padding:2px 8px;border-radius:6px;transition:all .3s}
.dc-status.on{background:rgba(201,168,76,.15);color:var(--gold)}
.dc-status.off{background:var(--gl);color:var(--tm)}
.dc-status.locked{background:rgba(76,175,80,.1);color:#4caf50}
.dc-status.unlocked{background:rgba(248,113,113,.1);color:#f87171}
.demo-log{margin-top:12px;display:flex;flex-direction:column;gap:5px;max-height:100px;overflow:hidden}
.dl-item{font-size:10px;color:var(--tm);padding:5px 8px;background:var(--gl);border-radius:7px;border-left:2px solid var(--gold);opacity:0;transform:translateY(-6px);transition:all .3s var(--eo)}
.dl-item.show{opacity:1;transform:translateY(0)}
.ef-name{font-size:11px;font-weight:600;margin-bottom:1px}
.ef-desc{font-size:10px;color:var(--tm);font-weight:300}
.ef-time{font-size:9px;color:var(--tm);flex-shrink:0}
.ef-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ef-stat-item{background:var(--gl);border:1px solid var(--gb);border-radius:10px;padding:10px 12px}
.ef-stat-val{font-family:var(--fd);font-size:20px;font-weight:700;color:var(--gold)}
.ef-stat-lbl{font-size:9px;color:var(--tm);margin-top:2px}
/* SCAN PHONE TAB */
.scan-phone-wrap{flex-shrink:0}
.scan-phone{width:196px;background:linear-gradient(145deg,var(--card-bg1),var(--card-bg2));border:1.5px solid rgba(255,255,255,.1);border-radius:38px;padding:10px 10px 14px;box-shadow:0 28px 70px rgba(0,0,0,.55)}
.spn{width:72px;height:18px;background:rgba(0,0,0,.55);border-radius:9px;margin:0 auto 8px}
.sps{background:rgba(4,6,14,.98);border-radius:28px;height:390px;overflow:hidden;position:relative}
html[data-theme="light"] .sps{background:rgba(12,16,32,.97)}
/* scan phases */
.sp{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:18px;opacity:0;transition:opacity .5s}
.sp.vis{opacity:1}
/* phase 1 */
.sp1-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(56,189,248,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(56,189,248,.06) 1px,transparent 1px);background-size:20px 20px}
.sp1-corners{position:absolute;inset:12px;pointer-events:none}
.sp1-cr{position:absolute;width:16px;height:16px;border-color:var(--cool);border-style:solid}
.sp1-cr.tl{top:0;left:0;border-width:2px 0 0 2px}
.sp1-cr.tr{top:0;right:0;border-width:2px 2px 0 0}
.sp1-cr.bl{bottom:0;left:0;border-width:0 0 2px 2px}
.sp1-cr.br{bottom:0;right:0;border-width:0 2px 2px 0}
.sp1-ring{width:68px;height:68px;border-radius:50%;border:2px solid rgba(56,189,248,.2);position:relative;animation:spinRing 2.2s linear infinite}
.sp1-ring::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid transparent;border-top-color:var(--cool);animation:spinRing 1.5s linear infinite reverse}
.sp1-ring::after{content:'';position:absolute;inset:10px;border-radius:50%;background:radial-gradient(circle,rgba(56,189,248,.12),transparent)}
@keyframes spinRing{to{transform:rotate(360deg)}}
.sp1-scanline{position:absolute;left:12px;right:12px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(56,189,248,.7),transparent);animation:scl 2s ease-in-out infinite}
@keyframes scl{0%,100%{top:12px;opacity:0}10%{opacity:.8}90%{opacity:.6}50%{top:88%}}
.sp1-lbl{font-size:10px;color:var(--cool);font-weight:700;margin-top:14px;letter-spacing:1.5px;text-transform:uppercase}
.sp1-pct{font-size:9px;color:rgba(56,189,248,.55);margin-top:3px}
.sp1-bar{width:90px;height:2px;background:rgba(255,255,255,.07);border-radius:1px;margin-top:8px;overflow:hidden}
.sp1-bf{height:100%;background:var(--cool);border-radius:1px;animation:spFill 2s ease-in-out infinite}
@keyframes spFill{0%{width:0}65%{width:92%}100%{width:100%}}
/* phase 2 */
.sp2-rooms{position:relative;width:150px;height:130px;margin-bottom:10px}
.sp2-room{position:absolute;border-radius:3px;border-width:1px;border-style:solid;transform:scale(0);opacity:0;transition:all .4s var(--eo);display:flex;align-items:center;justify-content:center;font-size:8px;font-family:var(--fb);font-weight:600}
.sp2-room.show{transform:scale(1);opacity:1}
.sp2-ok{font-size:11px;color:var(--grn);font-weight:700;letter-spacing:.5px}
.sp2-sub{font-size:9px;color:rgba(240,236,228,.4);margin-top:3px}
/* phase 3 */
.sp3-rooms{position:relative;width:150px;height:130px;margin-bottom:10px}
.sp3-room{position:absolute;border-radius:3px;border-width:1px;border-style:solid;opacity:.4}
.sp3-dev{position:absolute;width:18px;height:18px;border-radius:50%;background:rgba(0,0,0,.7);border:1px solid rgba(201,168,76,.45);display:flex;align-items:center;justify-content:center;font-size:9px;transform:scale(0);opacity:0;transition:all .3s var(--eo);cursor:pointer}
.sp3-dev.show{transform:scale(1);opacity:1}
.sp3-lbl{font-size:11px;color:var(--gold);font-weight:700;letter-spacing:.5px}
.sp3-sub{font-size:9px;color:rgba(240,236,228,.4);margin-top:3px}
.sp3-btn{margin-top:12px;padding:6px 16px;background:rgba(201,168,76,.1);border:1px solid rgba(201,168,76,.3);border-radius:8px;font-size:10px;color:var(--gold);font-weight:600;cursor:pointer;font-family:var(--fb)}
/* scan info */
.scan-info{flex:1;min-width:0;padding-top:4px}
.scan-steps{display:flex;flex-direction:column;gap:10px;margin-top:20px}
.sc-card{background:var(--gl);border:1px solid var(--gb);border-radius:14px;padding:14px 16px;display:flex;gap:12px;align-items:flex-start;transition:all .4s var(--eo)}
.sc-card.hl{border-color:rgba(201,168,76,.25);background:rgba(201,168,76,.03)}
.sc-ic{width:34px;height:34px;border-radius:10px;background:var(--gs);display:flex;align-items:center;justify-content:center;font-size:17px;flex-shrink:0;transition:all .4s var(--eo)}
.sc-card.hl .sc-ic{background:rgba(201,168,76,.12)}
.sc-t{font-size:12px;font-weight:700;margin-bottom:3px;font-family:var(--fd)}
.sc-d{font-size:11px;color:var(--tm);font-weight:300;line-height:1.55}