/* ===== NCRepairBench — desk items, pegboard, ambient animation =====
   Desk plane: y=0 at the desktop surface, z from +16 (front edge) to -266 (wall).
   Horizontal props (mat, shadows, light pools) are lifted 1-2px above the desk
   plane (translateY before rotateX) so nothing z-fights.                       */

/* ---------- pegboard on the wall ---------- */
.pegboard{
  left:50%;width:640px;height:206px;margin-left:-320px;top:78px;
  transform:translateZ(-316px);
  background:linear-gradient(#f7f9fb,#eaeef2);
  border:6px solid #dde3e9;border-radius:10px;
  box-shadow:0 6px 18px rgba(30,45,60,.10);
}
.peg-holes{
  position:absolute;inset:10px;
  background-image:radial-gradient(circle 3px at 3px 3px,#c9d2da 98%,transparent);
  background-size:34px 34px;
}
.peg-tool{position:absolute}
/* tape roll */
.pt-tape{
  left:48px;top:52px;width:64px;height:64px;border-radius:50%;
  background:radial-gradient(circle,#eef2f5 0 26%,transparent 27%),
             conic-gradient(#3fa9c9,#2c7fa0,#3fa9c9);
  box-shadow:0 3px 6px rgba(30,45,60,.22);
}
/* coiled cable */
.pt-cable{
  right:56px;top:44px;width:86px;height:86px;border-radius:50%;
  border:11px solid #46525f;
  box-shadow:inset 0 0 0 3px #5d6b79,0 3px 6px rgba(30,45,60,.2);
}
.pt-cable::after{
  content:"";position:absolute;left:32px;top:70px;width:9px;height:52px;
  background:#46525f;border-radius:5px;transform:rotate(-14deg);
}
/* hanging screwdrivers */
.pt-driver{width:9px;height:104px;border-radius:5px;top:46px;
  background:linear-gradient(#b8c2cb,#98a5b1)}
.pt-driver::before{
  content:"";position:absolute;left:-3.5px;top:0;width:16px;height:44px;border-radius:8px;
  background:linear-gradient(90deg,#0e7490,#12a3bf,#0e7490);
  box-shadow:0 2px 4px rgba(30,45,60,.25);
}
.pd1{left:172px}.pd2{left:214px}.pd3{left:256px;height:88px}
.pd2::before{background:linear-gradient(90deg,#b3541e,#e07b39,#b3541e)}
.pd3::before{background:linear-gradient(90deg,#3c4856,#5d6b79,#3c4856)}
/* spudger */
.pt-spudger{
  left:318px;top:56px;width:12px;height:92px;border-radius:6px;
  background:linear-gradient(#2f6f8f,#1f5570);
}
.pt-spudger::after{content:"";position:absolute;left:2px;top:-12px;width:8px;height:16px;
  background:#1f5570;clip-path:polygon(50% 0,100% 100%,0 100%)}
/* ESD wrist strap on a hook */
.pt-esd{
  left:392px;top:52px;width:58px;height:58px;border-radius:50%;
  border:9px solid #2e9db8;
  box-shadow:0 3px 6px rgba(30,45,60,.2);
}
.pt-esd::after{
  content:"";position:absolute;left:14px;top:44px;width:14px;height:20px;border-radius:3px;
  background:#3c4856;
}

/* ---------- items on the desk ---------- */
.desk-items{left:0;right:0;top:0;height:0}

/* --- monitor with live diagnostics (back center) --- */
.monitor{left:328px;top:0;width:280px;height:0}
/* clean flat-panel screen (thin dark bezel, soft inner vignette — reads as a
   modern LCD, not a glitchy CRT) showing a tidy diagnostics readout */
.mon-screen{
  left:0;bottom:52px;width:280px;height:172px;
  transform:translateZ(-198px);
  background:linear-gradient(165deg,#12283a 0%,#0a1723 58%,#081019 100%);
  border:8px solid #222d38;border-bottom-width:11px;border-radius:12px;
  box-shadow:0 8px 22px rgba(20,35,50,.30),
             inset 0 0 0 1px #0b2a38,inset 0 0 46px rgba(0,0,0,.55);
  overflow:hidden;transform-style:flat;
}
/* header row with a live status light */
.mon-head{
  left:16px;right:16px;top:15px;height:16px;padding-left:17px;
  font:700 13px/16px Consolas,monospace;letter-spacing:.03em;color:#8ef0da;
}
.mon-head::after{ /* thin divider under the header */
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:1px;
  background:linear-gradient(90deg,rgba(126,225,193,.45),transparent);
}
.mon-dot{
  position:absolute;left:0;top:3px;width:10px;height:10px;border-radius:50%;
  background:#4ee1c1;box-shadow:0 0 8px #4ee1c1;
  animation:monDot 1.9s ease-in-out infinite;
}
@keyframes monDot{0%,100%{opacity:1}50%{opacity:.4}}
/* four status bars, each filled to its own --w */
.mon-bars{left:0;right:0;top:0;bottom:0}
.mon-bars i{
  left:16px;right:16px;height:11px;border-radius:6px;
  background:rgba(126,225,193,.12);overflow:hidden;
}
/* bars stop above y~109 so the badge band (bottom ~118) never sits over one */
.mon-bars i:nth-child(1){top:44px}
.mon-bars i:nth-child(2){top:62px}
.mon-bars i:nth-child(3){top:80px}
.mon-bars i:nth-child(4){top:98px}
.mon-bars i::after{ /* the filled portion */
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--w,70%);border-radius:6px;
  background:linear-gradient(90deg,#0e9e86,#4ee1c1);
  box-shadow:0 0 10px rgba(78,225,193,.45);
}
.mon-bars i::before{ /* soft highlight sweeping across the readout */
  content:"";position:absolute;top:0;bottom:0;left:0;width:46px;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);
  animation:monScan 3.4s linear infinite;
}
@keyframes monScan{0%{transform:translateX(-46px)}100%{transform:translateX(268px)}}
.mon-badge{
  left:16px;bottom:12px;
  font:700 10px/1 Consolas,monospace;letter-spacing:.07em;color:#04140f;
  background:linear-gradient(#5ef0cf,#2ad0a8);border-radius:5px;padding:5px 9px;
  box-shadow:0 2px 8px rgba(43,208,168,.4);
}
.mon-neck{
  left:126px;bottom:14px;width:28px;height:40px;
  transform:translateZ(-200px);
  background:linear-gradient(90deg,#3a4956,#596876,#3a4956);
}
.mon-foot{
  left:82px;bottom:6px;width:116px;height:10px;border-radius:6px;
  transform:translateZ(-196px);
  background:linear-gradient(#4a5967,#333f4b);
}
/* --- anti-static mat front & center (2D child of the desk-top plane;
       coords are within the 984x282 desk-top, back edge = top) --- */
.mat{
  left:312px;bottom:40px;width:360px;height:150px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.05) 0 1px,transparent 1px 14px),
    linear-gradient(150deg,#3b83a3 0%,#2e6f8e 42%,#22536c 100%);
  border-radius:12px;
  /* stacked solid shadows fake a raised rubber thickness (a lit top edge, then
     two dark "walls" dropping to the desk), over a soft cast contact shadow */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.24),
    inset 0 -7px 14px rgba(0,15,28,.5),
    inset 0 0 0 7px rgba(255,255,255,.07),
    0 2px 0 #17384a,
    0 6px 0 #113040,
    11px 17px 22px rgba(25,40,58,.34);
}
.mat > *{position:absolute}
.mat-phone{
  left:34px;top:18px;width:64px;height:112px;border-radius:13px;
  background:linear-gradient(118deg,#2c3e4d 0%,#18232d 44%,#0b1218 100%);
  transform:rotate(-7deg);
  /* raised slab: lit top+left bevel, dark right wall, THREE stacked walls for a
     visible thickness, and a long soft cast shadow so it lifts off the mat */
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.22),
    inset 2px 0 0 rgba(255,255,255,.09),
    inset -2px 0 3px rgba(0,0,0,.5),
    0 2px 0 #070d12,0 4px 0 #05090d,0 7px 1px #03070a,
    10px 15px 17px rgba(0,15,28,.5);
}
.mat-phone::after{ /* rounded bottom thickness edge (the near wall) */
  content:"";position:absolute;left:1px;right:1px;bottom:-4px;height:8px;border-radius:0 0 12px 12px;
  background:linear-gradient(#0c131a,#04080b);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.phone-screen{
  position:absolute !important;inset:5px;border-radius:9px;
  background:linear-gradient(160deg,#3a5a78 0%,#17262f 52%,#0a1219 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.5),inset 0 2px 6px rgba(0,0,0,.55),
             inset 2px 3px 9px rgba(150,200,230,.18);
  overflow:hidden;
}
.phone-screen::before{ /* front camera dot */
  content:"";position:absolute;top:6px;left:50%;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;
  background:#05090d;box-shadow:0 0 0 1px rgba(255,255,255,.08);
}
.phone-screen::after{ /* glossy diagonal reflection */
  content:"";position:absolute;left:-25%;top:-15%;width:65%;height:130%;
  background:linear-gradient(104deg,transparent 42%,rgba(185,222,246,.18) 50%,transparent 58%);
  transform:rotate(6deg);
}
.phone-open{ /* opened back panel next to the phone, battery visible */
  left:112px;top:24px;width:58px;height:102px;border-radius:13px;
  transform:rotate(6deg);
  background:linear-gradient(118deg,#4a5b6b 0%,#2f3d4a 55%,#222d38 100%);
  box-shadow:
    inset 0 2px 0 rgba(255,255,255,.2),
    inset 2px 0 0 rgba(255,255,255,.08),
    inset -2px 0 3px rgba(0,0,0,.45),
    inset 0 -6px 11px rgba(0,15,28,.42),
    0 2px 0 #141c25,0 4px 0 #0f151d,0 7px 1px #0a0f15,
    9px 14px 16px rgba(0,15,28,.48);
}
.phone-open::before{ /* rounded bottom thickness edge (near wall) */
  content:"";position:absolute;left:1px;right:1px;bottom:-4px;height:8px;border-radius:0 0 12px 12px;
  background:linear-gradient(#1c2530,#0d131a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06);
}
.phone-open::after{ /* recessed battery */
  content:"";position:absolute;left:12px;top:22px;width:34px;height:56px;border-radius:5px;
  background:linear-gradient(#5b6b7a,#3f4d5a);
  box-shadow:inset 0 3px 5px rgba(0,0,0,.45),inset 0 -1px 0 rgba(255,255,255,.15),
             0 1px 0 rgba(255,255,255,.08);
}
.mat-tray{ /* magnetic screw tray — domed rim with a recessed well */
  right:34px;top:26px;width:54px;height:54px;border-radius:12px;
  background:radial-gradient(ellipse 62% 58% at 50% 44%,#c3ccd4 0%,#e6ecf1 58%,#f6f9fb 100%);
  box-shadow:
    inset 0 2px 1px rgba(255,255,255,.95),        /* lit top rim */
    inset 0 0 0 5px #dde4ea,                       /* raised rim ring */
    inset 3px 6px 12px rgba(0,20,35,.55),          /* deep well shadow */
    inset -2px -3px 6px rgba(0,20,35,.3),
    5px 9px 12px rgba(0,15,28,.42);                /* cast shadow on mat */
}
.mat-tray i{ /* domed screw heads with a slot */
  position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#f4f8fb 0%,#bcc7d1 46%,#7a8896 100%);
  box-shadow:0 1px 2px rgba(0,15,28,.55),inset 0 -1px 1px rgba(0,0,0,.35),
             inset 0 1px 1px rgba(255,255,255,.65);
}
.mat-tray i::after{ /* drive slot */
  content:"";position:absolute;left:50%;top:2px;bottom:2px;width:1.5px;margin-left:-.75px;
  background:rgba(18,32,46,.6);border-radius:1px;
}
.mat-tray i:nth-child(1){left:11px;top:12px}
.mat-tray i:nth-child(2){left:28px;top:17px;transform:rotate(40deg)}
.mat-tray i:nth-child(3){left:15px;top:31px;transform:rotate(-25deg)}
.mat-tray i:nth-child(4){left:33px;top:33px;transform:rotate(70deg)}
.mat-spudger{ /* pry tool resting on the mat — rounded handle + metal tip */
  right:54px;top:104px;width:74px;height:10px;border-radius:6px;
  transform:rotate(-16deg);
  background:linear-gradient(180deg,#8fa6b4 0%,#3a6d88 42%,#1f5570 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 -2px 3px rgba(0,15,28,.55),
             4px 6px 7px rgba(0,15,28,.45);
}
.mat-spudger::after{ /* angled metal pry tip */
  content:"";position:absolute;right:-11px;top:1px;width:17px;height:8px;
  background:linear-gradient(180deg,#eef3f6,#aab8c4 58%,#8493a0);
  clip-path:polygon(0 0,100% 26%,100% 74%,0 100%);
  box-shadow:2px 2px 3px rgba(0,15,28,.4);
}

/* --- precision screwdriver set standing in a holder (left side of the desk) ---
   Each "bit" is now a fat coloured HANDLE with grip ridges and a slim metal
   shaft dropping into the block, so it reads clearly as a screwdriver rather
   than an abstract coloured rod. */
.driver-stand{
  left:158px;top:-46px;width:78px;height:46px;border-radius:8px 8px 10px 10px;
  transform:translateZ(-120px);
  background:linear-gradient(180deg,#4a5866,#2f3a46);
  box-shadow:inset 0 2px 3px rgba(255,255,255,.12),0 4px 8px rgba(20,35,50,.3);
}
.driver-stand::before{ /* row of holes the shafts drop through */
  content:"";position:absolute;left:9px;right:9px;top:7px;height:8px;
  background-image:radial-gradient(circle 3px at 8px 4px,#11181f 60%,transparent 62%);
  background-size:16px 8px;
}
.driver-stand .bit{ /* the coloured handle */
  position:absolute;bottom:24px;width:13px;border-radius:7px 7px 3px 3px;
  background:linear-gradient(90deg,#0a5f77,#12a3bf 42%,#0a5f77);
  box-shadow:inset 1.5px 0 2px rgba(255,255,255,.28),inset -2px 0 3px rgba(0,0,0,.25);
}
.driver-stand .bit::before{ /* slim metal shaft into the holder */
  content:"";position:absolute;left:50%;bottom:-20px;width:4px;height:24px;margin-left:-2px;border-radius:2px;
  background:linear-gradient(90deg,#8b98a5,#eef2f5 45%,#8b98a5);
}
.driver-stand .bit::after{ /* grip ridges on the handle */
  content:"";position:absolute;left:2px;right:2px;top:5px;bottom:6px;border-radius:3px;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,.16) 0 2px,transparent 2px 5px);
}
.b1{left:9px;height:32px}
.b2{left:25px;height:40px;background:linear-gradient(90deg,#953a12,#e07b39 42%,#953a12)}
.b3{left:41px;height:28px;background:linear-gradient(90deg,#7a1f6b,#c23fae 42%,#7a1f6b)}
.b4{left:57px;height:36px;background:linear-gradient(90deg,#2c3742,#5d6b79 42%,#2c3742)}

/* --- soldering station (one connected unit) --- */
.solder{left:756px;top:0;width:150px;height:0}
.solder-base{
  left:0;top:-54px;width:100px;height:54px;border-radius:8px 8px 3px 3px;
  transform:translateZ(-140px);
  background:linear-gradient(160deg,#f2f5f8,#d9e0e7);
  border:1px solid #c8d1d9;
}
.solder-led{
  position:absolute;left:13px;top:15px;width:9px;height:9px;border-radius:50%;
  background:#26d07c;
  animation:led 2.2s ease-in-out infinite;
}
@keyframes led{
  0%,100%{box-shadow:0 0 4px 1px rgba(38,208,124,.7);opacity:1}
  50%{box-shadow:0 0 10px 3px rgba(38,208,124,.9);opacity:.75}
}
.solder-dial{
  position:absolute;left:36px;top:12px;width:26px;height:26px;border-radius:50%;
  background:conic-gradient(from 220deg,#42505e 0 60%,#5d6b79 0 100%);
  box-shadow:inset 0 0 0 3px #e8edf1;
}
.solder-holder{ /* coil holder attached to the base, iron rests through it */
  position:absolute;right:-4px;top:-20px;width:32px;height:34px;
  border-radius:50% 50% 5px 5px;
  border:5px solid #7e8c99;border-bottom:none;
  background:transparent;
  transform:translateZ(3px); /* front arc sits in front of the iron */
}
.solder-iron{ /* handle rests in the holder, tip angled up-left */
  left:8px;top:-64px;width:86px;height:9px;border-radius:5px;
  transform:translateZ(-138px) rotate(-26deg);
  transform-origin:right center;
  background:linear-gradient(#3c4856,#242e38);
}
.solder-iron::before{ /* shaft + tip */
  content:"";position:absolute;left:-30px;top:2.5px;width:32px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,#c9861f,#9aa7b2 45%);
}
.solder-smoke{left:-14px;top:-102px;width:0;height:0;transform:translateZ(-138px)}
.solder-smoke i{
  position:absolute;left:0;bottom:0;width:7px;height:7px;border-radius:50%;
  background:rgba(150,168,182,.5);
  filter:blur(2px);
  animation:smoke 4.2s linear infinite;
  opacity:0;
}
.solder-smoke i:nth-child(2){animation-delay:1.4s;left:3px}
.solder-smoke i:nth-child(3){animation-delay:2.8s;left:-3px}
@keyframes smoke{
  0%{transform:translate(0,0) scale(.6);opacity:0}
  12%{opacity:.55}
  100%{transform:translate(9px,-72px) scale(2.6);opacity:0}
}

/* --- articulated work lamp (clamped to the desk, arms actually connect) --- */
.lamp{right:16px;top:0;width:0;height:0}
.lamp > *{transform-style:preserve-3d}
.lamp-base{
  left:-104px;top:-14px;width:86px;height:14px;border-radius:6px 6px 2px 2px;
  transform:translateZ(-150px);
  background:linear-gradient(#57646f,#39444f);
  box-shadow:0 3px 6px rgba(20,35,50,.3);
}
.lamp-base::after{ /* pivot knob */
  content:"";position:absolute;left:37px;top:-8px;width:12px;height:12px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#8b98a5,#4a5661);
}
.lamp-arm{width:10px;border-radius:5px;background:linear-gradient(90deg,#57646f,#39444f);
  transform-origin:bottom center}
.lamp-arm::after{ /* elbow joint */
  content:"";position:absolute;left:-3px;top:-5px;width:16px;height:16px;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,#8b98a5,#4a5661);
}
.lamp-arm.a1{left:-66px;top:-136px;height:124px;transform:translateZ(-150px) rotate(-13deg)}
.lamp-arm.a2{left:-93px;top:-236px;height:106px;transform:translateZ(-150px) rotate(30deg)}
.lamp-head{
  left:-74px;top:-242px;width:74px;height:38px;border-radius:40px 40px 8px 8px;
  transform:translateZ(-150px) rotate(20deg);
  background:linear-gradient(160deg,#f2f5f8,#cfd8e0);
  border:1px solid #bcc7d1;
  box-shadow:0 4px 10px rgba(20,35,50,.2);
}
.lamp-lens{
  position:absolute;left:11px;bottom:-4px;width:52px;height:12px;border-radius:50%;
  background:radial-gradient(#fff8e1,#ffe9a8);
  box-shadow:0 0 14px 4px rgba(255,238,170,.75);
  animation:lampGlow 5.5s ease-in-out infinite;
}
@keyframes lampGlow{
  0%,100%{box-shadow:0 0 14px 4px rgba(255,238,170,.75)}
  50%{box-shadow:0 0 20px 6px rgba(255,238,170,.9)}
}

/* ---------- wall shelves w/ shop props (flank the pegboard) ----------
   Sit on the wall plane (translateZ -314, just in front of the wall) so they
   fill the empty space either side of the pegboard without touching the bench's
   3D sorting. Purely decorative. */
.wall-shelf{transform:translateZ(-314px)}
.wall-shelf > *{position:absolute}
.ws-left {left:34px; top:150px;width:196px;height:150px}
.ws-right{right:34px;top:150px;width:196px;height:150px}
.wsh-board{
  left:0;right:0;bottom:0;height:13px;border-radius:3px;
  background:linear-gradient(#eef1f4,#cdd5dd);
  box-shadow:0 9px 15px rgba(30,45,60,.16),inset 0 1px 0 #fff;
}
.wsh-board::after{ /* soft underside shadow / brackets */
  content:"";position:absolute;left:10px;right:10px;top:13px;height:9px;
  background:linear-gradient(rgba(30,45,60,.15),transparent);
}
.wall-shelf .glow{ /* tiny status LEDs share one look */
  border-radius:50%;
}

/* retro CRT test monitor */
.prop-crt{left:6px;bottom:13px;width:62px;height:50px;border-radius:8px 8px 6px 6px;
  background:linear-gradient(160deg,#ece7db,#d3ccba);
  box-shadow:0 6px 11px rgba(30,45,60,.2),inset 0 1px 0 rgba(255,255,255,.6);}
.prop-crt .crt-screen{position:absolute;left:7px;top:8px;right:15px;bottom:11px;border-radius:5px;
  background:radial-gradient(circle at 40% 34%,#2e7a72,#0c1922 82%);
  box-shadow:inset 0 0 8px rgba(0,0,0,.6);}
.prop-crt::after{content:"";position:absolute;right:6px;bottom:9px;width:6px;height:6px;border-radius:50%;
  background:#26d07c;box-shadow:0 0 5px #26d07c;}

/* slim game console */
.prop-console{left:74px;bottom:13px;width:60px;height:17px;border-radius:4px;
  background:linear-gradient(#3a4756,#232d38);box-shadow:0 4px 8px rgba(30,45,60,.2);}
.prop-console .con-led{left:8px;top:6px;width:6px;height:6px;border-radius:50%;
  background:#12a3bf;box-shadow:0 0 5px #12a3bf;}
.prop-console .con-line{right:7px;top:7px;width:22px;height:4px;border-radius:2px;background:#4a5967;}

/* stacked parts bins */
.prop-bins{left:142px;bottom:13px;width:50px;height:40px}
.prop-bins i{left:0;width:50px;height:18px;border-radius:2px 2px 3px 3px;
  box-shadow:inset 0 3px 4px rgba(255,255,255,.2),0 3px 5px rgba(30,45,60,.16);}
.prop-bins i:nth-child(1){bottom:0;background:linear-gradient(#12a3bf,#0b7e96)}
.prop-bins i:nth-child(2){bottom:20px;width:44px;left:3px;background:linear-gradient(#8a99a8,#5f6e7c)}

/* desktop PC tower */
.prop-tower{left:8px;bottom:13px;width:42px;height:76px;border-radius:5px;
  background:linear-gradient(120deg,#3c4856,#28323d);
  box-shadow:0 7px 13px rgba(30,45,60,.22),inset 0 1px 0 rgba(255,255,255,.08);}
.prop-tower .tw-slot{left:8px;right:8px;height:4px;border-radius:2px;background:#1b232c}
.prop-tower .s1{top:10px}.prop-tower .s2{top:18px}
.prop-tower .tw-vent{left:8px;right:8px;bottom:22px;height:16px;border-radius:3px;
  background:repeating-linear-gradient(180deg,#1b232c 0 2px,transparent 2px 5px)}
.prop-tower .tw-led{left:9px;bottom:9px;width:6px;height:6px;border-radius:50%;
  background:#26d07c;box-shadow:0 0 5px #26d07c}

/* network router */
.prop-router{left:58px;bottom:13px;width:70px;height:22px;border-radius:4px;
  background:linear-gradient(#2f3a46,#1c242d);box-shadow:0 4px 8px rgba(30,45,60,.2);}
.prop-router .rt-ant{top:-18px;width:5px;height:20px;border-radius:3px;
  background:linear-gradient(#57646f,#39444f);transform-origin:bottom center}
.prop-router .a1{left:10px;transform:rotate(-16deg)}
.prop-router .a2{right:10px;transform:rotate(16deg)}
.prop-router .rt-led{left:8px;bottom:6px;width:5px;height:5px;border-radius:50%;
  background:#12a3bf;box-shadow:0 0 4px #12a3bf}
.prop-router::after{content:"";position:absolute;right:8px;bottom:6px;width:22px;height:4px;border-radius:2px;background:#3f4c5a}

/* taped cardboard box */
.prop-box{left:136px;bottom:13px;width:52px;height:40px;border-radius:3px;
  background:linear-gradient(160deg,#e2cb9f,#c9ab74);
  box-shadow:0 6px 10px rgba(30,45,60,.18),inset 0 1px 0 rgba(255,255,255,.4);}
.prop-box::before{content:"";position:absolute;left:0;right:0;top:15px;height:4px;background:rgba(120,90,40,.32)}
.prop-box::after{content:"";position:absolute;left:50%;top:0;width:4px;height:15px;margin-left:-2px;background:rgba(120,90,40,.32)}

@media (prefers-reduced-motion:reduce){
  .mon-dot,.solder-led,.solder-smoke i,.lamp-lens{animation:none}
  .mon-bars i::before{animation:none;display:none}
  .solder-smoke{display:none}
}

/* ---------- diagnostics-bar fill widths ----------
   These four exist because the site ships under a strict CSP with
   style-src 'self' and no nonce substitution on static files, so the
   per-bar fill widths can no longer ride on inline style="--w:NN%"
   attributes in index.html. Same four values, moved into classes.
   They must out-specify `.mon-bars i::after` (0,1,2), so each selector
   qualifies the element as well as the class: `.mon-bars i.bar-wNN::after`
   is (0,2,2) and wins. Pair with `.mon-bars i:nth-child(1..4)` above,
   which owns each bar's vertical position; these own width only. */
.mon-bars i.bar-w86::after{width:86%}
.mon-bars i.bar-w62::after{width:62%}
.mon-bars i.bar-w94::after{width:94%}
.mon-bars i.bar-w48::after{width:48%}