/* ==========================================================================
   assemblage.css — 三维悬垂索线 / 张力滑轮支点 / 刻度圆盘 / 机械连杆
                    工控电池排组 / 仪表阵列 / 独立 3D CAPTCHA / 坐标背景连线
   构件语言取自 ref/：connect.jpg 的螺栓装置底板与刻度盘阵列、
   105e7718 的轴测悬吊与引线图例、6f55125d 的套版十字与构造圆、
   296a3b7b 的红线蓝钉档案连结、ec196398 的基准线与微色标。
   ========================================================================== */

/* ---------------- 悬垂索线分段 ---------------- */
/* 每段端点精确落在相邻两个夹具孔心（或滑轮支点）上，故绳线必然穿孔而过 */
.wire-seg{
  position:absolute;left:0;top:0;height:3.2px;
  transform-origin:0 50%;
  transform-style:preserve-3d;pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  background:linear-gradient(180deg,
    rgba(255,255,255,.9) 0%,
    var(--wire-lit) 22%,
    var(--wire-core) 58%,
    #000 100%);
  box-shadow:0 1px 0 rgba(255,255,255,.34),0 4px 10px rgba(0,0,0,.42);
  z-index:2;
}
.wire-seg::before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(74deg,
    rgba(255,255,255,.34) 0 1px,
    rgba(0,0,0,.26) 1px 3px,
    rgba(255,255,255,0) 3px 5px);
  opacity:.7;
}
.wire-seg.is-ghost{
  height:8px;background:rgba(0,0,0,.12);filter:blur(5px);box-shadow:none;
}
.wire-seg.is-ghost::before{display:none;}

/* ---------------- 张力滑轮支点 ---------------- */
.pulley{
  position:absolute;left:0;top:0;transform-style:preserve-3d;
  pointer-events:none;z-index:6;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.pulley .pl-wheel{
  position:absolute;left:-17px;top:-17px;width:34px;height:34px;border-radius:50%;
  background:
    radial-gradient(circle at 36% 30%,#fff,rgba(255,255,255,0) 52%),
    conic-gradient(from 200deg,#f6f6f4,#8d8d8a 24%,#1e1e20 50%,#7c7c7a 68%,#e2e2e0 86%,#f6f6f4);
  border:1px solid #1b1b1c;
  box-shadow:0 6px 14px rgba(0,0,0,.45),inset 0 0 6px rgba(0,0,0,.35);
}
.pulley .pl-wheel::after{
  content:"";position:absolute;inset:36%;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#5a5a58 60%,#141415);
  box-shadow:0 1px 2px rgba(0,0,0,.6);
}
.pulley .pl-groove{
  position:absolute;left:-18px;top:-2.5px;width:36px;height:5px;
  background:linear-gradient(180deg,rgba(0,0,0,.55),rgba(0,0,0,.15));
  border-radius:3px;
}
.pulley .pl-yoke{
  position:absolute;left:-7px;top:-40px;width:14px;height:26px;
  background:linear-gradient(90deg,#e8e8e5,#8f8f8c 48%,#3c3c3a);
  border:1px solid #232323;border-bottom:none;
  box-shadow:0 3px 8px rgba(0,0,0,.4);
}
.pulley .pl-yoke::before{
  content:"";position:absolute;left:50%;top:4px;width:5px;height:5px;
  margin-left:-2.5px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#5c5c59 62%,#18181a);
}
.pulley .pl-tag{
  position:absolute;left:-30px;top:24px;width:60px;
  font-family:var(--font-code);font-size:.4rem;line-height:1.3;text-align:center;
  letter-spacing:.08em;color:#2a2a28;
  background:rgba(245,245,240,.9);border:1px solid #6a6a65;padding:1px 0;
  transform:translateZ(4px) rotate(-1.4deg);
  box-shadow:0 2px 5px rgba(0,0,0,.25);
}
body.theme-dark .pulley .pl-tag{background:rgba(28,30,34,.9);color:#c8ccd2;border-color:#4b515a;}

/* 端点锚板 + 花篮螺栓（张紧硬件） */
.pulley.is-anchor .pl-plate{
  position:absolute;left:-20px;top:-30px;width:40px;height:60px;
  background:linear-gradient(114deg,#f2f2ef,#8c8c89 46%,#484846);
  border:1px solid #2b2b2a;
  box-shadow:0 8px 20px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.7);
}
.pulley.is-anchor .pl-plate::before,
.pulley.is-anchor .pl-plate::after{
  content:"";position:absolute;width:6px;height:6px;border-radius:50%;
  background:radial-gradient(circle at 32% 30%,#fff,#5b5b59 62%,#1c1c1b);
}
.pulley.is-anchor .pl-plate::before{left:5px;top:5px;}
.pulley.is-anchor .pl-plate::after{right:5px;bottom:5px;}
.pulley.is-anchor .pl-buckle{
  position:absolute;left:-24px;top:-6px;width:48px;height:12px;
  background:linear-gradient(180deg,#eaeae7,#6d6d6a 55%,#2d2d2c);
  border:1px solid #222221;border-radius:2px;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}

.pulley.is-anchor .pl-wheel,
.pulley.is-anchor .pl-groove,
.pulley.is-anchor .pl-yoke{display:none;}
.pulley:not(.is-anchor) .pl-plate,
.pulley:not(.is-anchor) .pl-buckle{display:none;}

.wire-seg.is-rail{
  height:3.6px;
  background:linear-gradient(180deg,#f7f7f3,#c8c8c4 28%,#2a2a28 62%,#000);
  box-shadow:0 0 0 1px rgba(0,0,0,.35),0 2px 0 rgba(255,255,255,.25),0 6px 12px rgba(0,0,0,.4);
}

.pulley.is-meter .pl-plate{
  left:-28px;top:-48px;width:56px;height:86px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.2),transparent 22%),
    linear-gradient(114deg,#f4f4f0,#8a8a86 48%,#2e2e2c);
}
.pulley.is-meter .pl-gauge{
  position:absolute;left:-22px;top:-72px;width:44px;height:44px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 58%,#1a1c18 0 38%,transparent 39%),
    repeating-conic-gradient(from 210deg,#e8e6dc 0 6deg,#2a2a26 6deg 8deg),
    #111;
  border:2px solid #111;
  box-shadow:0 6px 14px rgba(0,0,0,.4),inset 0 0 0 3px #c4c2b8;
}
.pulley.is-meter .pl-needle{
  position:absolute;left:50%;top:50%;width:2px;height:16px;margin:-14px 0 0 -1px;
  background:#c9182b;
  transform-origin:50% 100%;
  transform:rotate(var(--needle,0deg));
  box-shadow:0 0 6px rgba(201,24,43,.6);
}
.pulley.is-meter .pl-kn{
  position:absolute;left:0;right:0;bottom:-16px;
  font-family:var(--font-screen);font-size:.72rem;text-align:center;color:#c9182b;
  letter-spacing:.04em;
}
.pulley.is-meter .pl-tag{top:44px;width:72px;left:-36px;}

/* ---------------- 顶部夹具 + 索环打孔 ---------------- */
.binder{
  position:absolute;left:0;top:0;width:54px;height:30px;
  margin:-15px 0 0 -27px;
  transform-style:preserve-3d;
  z-index:40;pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}
.binder .binder-jaw{
  position:absolute;inset:0;
  background:linear-gradient(176deg,#fbfbfa 0%,#d1d1cd 16%,#9b9b97 52%,#5c5c59 82%,#323230 100%);
  border:1px solid #2a2a28;border-radius:3px;
  box-shadow:0 5px 12px rgba(0,0,0,.42),inset 0 1px 0 rgba(255,255,255,.85);
  /* 真实镂空中央圆孔 */
  -webkit-mask:radial-gradient(circle 9.6px at 50% 50%,transparent 0 9.6px,#000 9.8px);
          mask:radial-gradient(circle 9.6px at 50% 50%,transparent 0 9.6px,#000 9.8px);
}
.binder .binder-grommet{
  /* 金属索环：用 mask 在渐变圆盘上真实打穿，绳线自孔心透出 */
  position:absolute;left:50%;top:50%;width:26px;height:26px;
  margin:-13px 0 0 -13px;border-radius:50%;
  background:conic-gradient(from 212deg,#ffffff,#8a8a8e 26%,#1c1c1f 52%,#6e6e72 66%,#d8d8dc 82%,#ffffff);
  -webkit-mask:radial-gradient(circle 9.2px at 50% 50%,transparent 0 9.2px,#000 9.4px);
          mask:radial-gradient(circle 9.2px at 50% 50%,transparent 0 9.2px,#000 9.4px);
  pointer-events:none;
}
.binder .binder-grommet::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  box-shadow:inset 0 2px 2px rgba(0,0,0,.6),inset 0 -1px 1px rgba(255,255,255,.35);
}
.binder .binder-rivet{
  position:absolute;top:50%;width:5px;height:5px;margin-top:-2.5px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#696967 60%,#19191a);
}
.binder .binder-rivet.r-l{left:5px;}
.binder .binder-rivet.r-r{right:5px;}

/* ---------------- 工控装置：支撑缆 + 机箱 ---------------- */
.dev-cable{
  position:absolute;left:0;top:0;width:3px;margin-left:-1.5px;
  transform-origin:top center;
  background:linear-gradient(90deg,#0e0e0f,#8d9197 45%,#191919);
  box-shadow:0 0 5px rgba(0,0,0,.45);
  z-index:5;pointer-events:none;
}
.dev-cable::after{
  content:"";position:absolute;bottom:-4px;left:-4px;width:11px;height:9px;
  background:linear-gradient(180deg,#e1e1de,#5b5b58);
  border:1px solid #232322;border-radius:2px;
}
.dev-panel{
  position:absolute;left:0;top:0;transform-style:preserve-3d;cursor:pointer;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
  -moz-osx-font-smoothing:auto;
}
.dev-shell{
  position:relative;
  background:linear-gradient(168deg,#f0f0ec,#ccccc7 42%,#a8a8a3);
  border:1px solid #393937;
  border-top-color:#fff;border-left-color:#f3f3f0;
  padding:7px;
  box-shadow:0 20px 40px #111,inset 0 1px 0 #f3f3f0;
  font-family:var(--font-code);color:#181816;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  -webkit-font-smoothing:subpixel-antialiased;
}
body.theme-dark .dev-shell{
  background:linear-gradient(168deg,#3a3c41,#252629 45%,#15161a);
  color:#dededa;border-color:#0c0d0f;
  border-top-color:#c8c8c4;border-left-color:#9a9a96;
  box-shadow:0 20px 40px #000,inset 0 1px 0 #3a3c40;
}
.dev-hd{
  font-size:.55rem;font-weight:700;letter-spacing:.08em;
  display:flex;justify-content:space-between;align-items:center;gap:6px;
  border-bottom:1px solid #84847e;padding-bottom:3px;margin-bottom:5px;
}
.dev-screen{
  background:#0b100b;border:1px solid #000;
  box-shadow:inset 0 0 12px rgba(0,255,120,.16);
  padding:4px 5px;font-family:var(--font-screen);
  color:#6cf39a;font-size:.85rem;line-height:1.15;letter-spacing:.06em;
}
.dev-screen .scr-line{display:flex;justify-content:space-between;}
.dev-foot{
  font-size:.45rem;letter-spacing:.1em;color:#54544f;margin-top:4px;
  display:flex;justify-content:space-between;
}
.dev-dial-face{
  margin:8px auto 6px;width:96px;height:96px;border-radius:50%;
  background-color:#d6d6d0;
  background-image:
    radial-gradient(circle at 34% 28%,#f4f4f0 0 18%,transparent 52%),
    conic-gradient(from 0deg,#e4e4de,#8e8e8a 22%,#f3f3f0 46%,#6d6d6a 70%,#e4e4de);
  border:2px solid #53534d;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-screen);font-size:1.6rem;color:#1b1b19;
  box-shadow:0 8px 16px rgba(0,0,0,.28),inset 0 0 10px rgba(0,0,0,.22);
  isolation:isolate;
}
body.theme-dark .dev-foot{color:#8a8c93;}

/* LED 排 */
.led-bank{display:flex;gap:4px;margin-top:5px;}
.led{
  width:9px;height:9px;border-radius:50%;
  background:#4b4b46;border:1px solid #222220;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.4);
}
.led.on.led-g{background:#37e06a;box-shadow:0 0 7px #37e06a,inset 0 1px 1px rgba(255,255,255,.7);}
.led.on.led-r{background:#ff3b3b;box-shadow:0 0 7px #ff3b3b,inset 0 1px 1px rgba(255,255,255,.7);}
.led.on.led-y{background:#ffd23b;box-shadow:0 0 7px #ffd23b,inset 0 1px 1px rgba(255,255,255,.7);}

/* 条形仪表 */
.dev-meter{height:7px;margin-top:5px;background:#292925;border:1px solid #0f0f0f;overflow:hidden;}
.dev-meter i{
  display:block;height:100%;
  background:repeating-linear-gradient(90deg,#d8412f 0 4px,#8c2a1e 4px 6px);
}

/* 电池排组（ref: connect.jpg 底板电池阵列） */
.battery-bank{display:flex;gap:3px;margin-top:5px;}
.battery-bank i{
  flex:1;height:22px;border-radius:1px;
  background:linear-gradient(180deg,#d8c27a 0 3px,#2b2b28 3px 5px,#b9a45f 5px 100%);
  border:1px solid #1d1d1b;
  box-shadow:inset -1px 0 0 rgba(255,255,255,.35),0 2px 4px rgba(0,0,0,.35);
}
.battery-bank i::after{
  content:"";display:block;width:4px;height:3px;margin:-3px auto 0;
  background:#c9c9c4;border:1px solid #1d1d1b;
}

/* 仪表阵列（ref: connect.jpg 底排压力表） */
.gauge-row{display:flex;gap:5px;margin-top:6px;}
.gauge{
  flex:1;aspect-ratio:1;border-radius:50%;position:relative;
  background:
    radial-gradient(circle at 36% 28%,#fff,rgba(255,255,255,0) 50%),
    conic-gradient(from 210deg,#eceae2,#b8b6ac 40%,#f4f2ea 70%,#d2d0c6);
  border:2px solid #4a4a46;
  box-shadow:0 3px 8px rgba(0,0,0,.35),inset 0 0 8px rgba(0,0,0,.22);
}
.gauge::before{
  content:"";position:absolute;left:50%;top:50%;width:1.5px;height:38%;
  background:var(--stamp-red);transform-origin:bottom center;
  transform:translate(-50%,-100%) rotate(var(--needle,32deg));
}
.gauge::after{
  content:"";position:absolute;left:50%;top:50%;width:4px;height:4px;
  margin:-2px 0 0 -2px;border-radius:50%;background:#2a2a27;
}

/* Y2K 徽章条（ref: 11cd3756） */
.y2k-badges{display:flex;flex-wrap:wrap;gap:2px;margin-top:5px;}
.y2k-badges i{
  width:40px;height:14px;
  border-top:1px solid #fff;border-left:1px solid #fff;
  border-right:1px solid #55554f;border-bottom:1px solid #55554f;
  font-family:var(--font-code);font-size:.32rem;
  display:flex;align-items:center;justify-content:center;
  color:#f4f4f0;letter-spacing:.04em;font-style:normal;
  text-shadow:0 1px 0 rgba(0,0,0,.7);
  background-image:repeating-conic-gradient(from 0deg,rgba(255,255,255,.14) 0 25%,transparent 0 50%);
  background-size:2px 2px;
}
.y2k-badges i:nth-child(1){background-color:#1b38a6;}
.y2k-badges i:nth-child(2){background-color:#0a7a34;}
.y2k-badges i:nth-child(3){background-color:#c9182b;}
.y2k-badges i:nth-child(4){background-color:#5a2c8c;}

/* CAPTCHA */
.captcha-canvas{
  width:100%;height:40px;display:block;background:#fff;border:1px solid #3b3b39;
}
.captcha-input{
  width:100%;margin-top:5px;padding:2px 4px;
  font-family:var(--font-screen);font-size:.95rem;
  border:1px solid #65655f;background:#fff;color:#111;
}
.captcha-msg{
  font-family:var(--font-code);font-size:.47rem;margin-top:3px;
  min-height:11px;letter-spacing:.06em;
}

/* ==========================================================================
   背景坐标场 / 装置艺术构件
   ========================================================================== */
.assemblage-field > *{
  position:absolute;left:0;top:0;pointer-events:none;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
}

/* 刻度圆盘阵列：实体金属，不穿透背景网格 */
.dial-disc{
  border-radius:50%;
  background-color:#d6d6d0;
  background-image:
    radial-gradient(circle at 34% 28%,#f4f4f0 0 18%,transparent 52%),
    conic-gradient(from 0deg,#e4e4de,#8e8e8a 22%,#f3f3f0 46%,#6d6d6a 70%,#e4e4de);
  border:2px solid #53534d;
  display:flex;align-items:center;justify-content:center;
  font-family:var(--font-screen);color:#1b1b19;
  box-shadow:0 12px 26px rgba(0,0,0,.3),inset 0 0 12px rgba(0,0,0,.28);
  opacity:1;
  isolation:isolate;
  mix-blend-mode:normal;
}
.dial-disc::before{
  content:"";position:absolute;inset:12%;border-radius:50%;
  background:transparent;
  border:1px dashed rgba(0,0,0,.42);
  transform:rotate(var(--spin,0deg));
}
.dial-disc::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:repeating-conic-gradient(from 0deg,
    #2a2a28 0 1deg,transparent 1deg 15deg);
  -webkit-mask:radial-gradient(circle,transparent 0 62%,#000 64%);
          mask:radial-gradient(circle,transparent 0 62%,#000 64%);
  pointer-events:none;
}

/* 机械传动连杆（带螺栓端帽） */
.link-rod{
  height:5px;border-radius:3px;opacity:.42;
  background:linear-gradient(180deg,var(--alu-hi),var(--alu-mid) 45%,var(--alu-lo));
  box-shadow:0 6px 16px rgba(0,0,0,.3);
  transform-origin:0 50%;
}
.link-rod::before,.link-rod::after{
  content:"";position:absolute;top:-4px;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#fff,#7a7a76 55%,#2a2a28);
  border:1px solid #1d1d1c;
}
.link-rod::before{left:-6px;}
.link-rod::after{right:-6px;}

/* 氧化铝直尺：已从场景中移除 */
.alu-rail{display:none !important;}

/* 套版红十字 */
.field-cross{width:16px;height:16px;opacity:.75;}
.field-cross::before,.field-cross::after{content:"";position:absolute;background:var(--reg-red);}
.field-cross::before{left:50%;top:0;width:1px;height:100%;margin-left:-.5px;}
.field-cross::after{top:50%;left:0;height:1px;width:100%;margin-top:-.5px;}

/* 虚线构造圆 + 开口节点圈 */
.field-circle{border:1px dashed rgba(0,0,0,.3);border-radius:50%;opacity:.55;}
body.theme-dark .field-circle{border-color:rgba(255,255,255,.22);}
.field-node{
  width:15px;height:15px;border-radius:50%;
  border:1px solid rgba(0,0,0,.55);background:transparent;opacity:.6;
}
body.theme-dark .field-node{border-color:rgba(255,255,255,.4);}

/* 基准线 1000 + ‹ 刻度网（ref: ec196398） */
.field-datum{
  height:1px;opacity:.55;
  background:repeating-linear-gradient(90deg,rgba(0,0,0,.6) 0 2px,transparent 2px 6px);
}
body.theme-dark .field-datum{background:repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 2px,transparent 2px 6px);}
.field-datum::before,.field-datum::after{
  content:"1000";position:absolute;top:-6px;
  font-family:var(--font-code);font-size:.46rem;color:var(--ink-dim);
}
.field-datum::before{left:-34px;}
.field-datum::after{right:-34px;}
.field-ticks{
  font-family:var(--font-code);font-size:.5rem;color:var(--ink-faint);
  letter-spacing:1.1em;line-height:2.1;opacity:.5;white-space:pre;
}

/* 轴测图例块（ref: 105e7718 右下角图例） */
.field-legend{
  width:168px;background:rgba(246,246,242,.76);
  border:1px solid rgba(0,0,0,.35);padding:5px 6px;opacity:.72;
  font-family:var(--font-code);font-size:.4rem;line-height:1.55;color:#2a2a26;
}
body.theme-dark .field-legend{background:rgba(22,24,28,.8);color:#c4c8ce;border-color:rgba(255,255,255,.22);}
.field-legend .fl-hd{
  background:#1c1c19;color:#f2f2ee;letter-spacing:.14em;
  padding:1px 4px;margin:-5px -6px 4px;font-weight:700;
}
.field-legend .fl-row{display:flex;align-items:center;gap:5px;}
.field-legend .fl-row i{
  width:8px;height:8px;border-radius:50%;background:#1c1c19;flex:0 0 8px;
}

/* 标注文字 */
.field-note{
  font-family:var(--font-code);font-size:.48rem;letter-spacing:.2em;
  color:var(--ink-faint);opacity:.62;white-space:nowrap;
}

/* 悬吊落线（ref: 105e7718 垂直吊线） */
.field-drop{
  width:1px;opacity:.4;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.5) 0 3px,transparent 3px 7px);
}
body.theme-dark .field-drop{background:repeating-linear-gradient(0deg,rgba(255,255,255,.4) 0 3px,transparent 3px 7px);}
.field-drop::after{
  content:"";position:absolute;left:-3px;bottom:-4px;width:7px;height:7px;
  background:#1c1c19;transform:rotate(45deg);
}

/* 荧光黄标记带 / 雪佛龙 */
.field-hl{
  height:13px;background:var(--marker-yellow);opacity:.5;transform-origin:0 50%;
}
.field-chevron{
  width:0;height:0;opacity:.55;
  border-left:13px solid rgba(0,0,0,.6);
  border-top:9px solid transparent;border-bottom:9px solid transparent;
}
body.theme-dark .field-chevron{border-left-color:rgba(255,255,255,.4);}

/* 微色标条（ref: ec196398 金/灰小色块） */
.field-swatchbar{width:13px;opacity:.7;}
.field-swatchbar i{display:block;width:100%;}

/* ---------------- 红线蓝钉档案连结网（ref: 296a3b7b） ---------------- */
.pin-thread-layer{
  position:absolute;left:0;top:0;overflow:visible;pointer-events:none;
  z-index:1;opacity:.5;
}
.pin-thread-layer path{fill:none;stroke:var(--reg-red);stroke-width:1;}
.pin-thread-layer circle{fill:#1b38a6;stroke:rgba(255,255,255,.75);stroke-width:1;}