/* ==========================================================================
   transmitter.css — Futaba T14SG 外观与交互
   ========================================================================== */
.tx-scale-wrap{
  width:100%;display:flex;justify-content:center;align-items:flex-start;
  padding-top:36px;
}
.tx{
  --tx-w:424px;
  position:relative;
  width:var(--tx-w);
  padding:12px 14px 18px;
  border-radius:26px 26px 40px 40px / 20px 20px 34px 34px;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.012) 0 2px, transparent 2px 4px),
    linear-gradient(180deg,#3c4756 0%,#2d3644 10%,#252d39 45%,#1b222b 88%,#151b23 100%);
  border:1px solid #4a5a6d;
  box-shadow:
    0 26px 55px rgba(0,0,0,.6),
    0 2px 0 rgba(255,255,255,.10) inset,
    0 -22px 38px rgba(0,0,0,.4) inset;
  zoom:var(--tx-scale);
}

/* 左右握柄阴影 */
.tx::after{
  content:"";position:absolute;left:6px;right:6px;bottom:-8px;height:26px;
  border-radius:0 0 40px 40px / 0 0 30px 30px;
  background:linear-gradient(180deg,#1a212b,#0e131a);
  z-index:-1;
}

/* ---------------- 天线 ---------------- */
.tx-antenna{position:absolute;top:-34px;left:64px;width:60px;height:64px;pointer-events:none;}
.ant-base{
  position:absolute;left:12px;top:34px;width:26px;height:22px;border-radius:6px;
  background:linear-gradient(180deg,#4b5768,#29313d);border:1px solid #5b6b7e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.2);
}
.ant-rod{
  position:absolute;left:18px;top:-6px;width:9px;height:52px;border-radius:5px;
  background:linear-gradient(90deg,#20262f,#4d5866 40%,#2b333e);
  transform-origin:bottom center;transform:rotate(-24deg);
  box-shadow:0 0 0 1px rgba(0,0,0,.4);
}
.ant-rod::after{
  content:"";position:absolute;left:-1px;top:-8px;width:11px;height:12px;border-radius:4px;
  background:linear-gradient(180deg,#5d6a7b,#333c49);
}
.tx-antenna.held .ant-rod{box-shadow:0 0 12px 2px rgba(239,68,68,.8);}

/* ---------------- 顶部：LED + LOGO ---------------- */
.tx-topstrip{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  gap:8px;padding:8px 12px 6px;
  border-radius:12px;
  background:linear-gradient(180deg,#10161d,#161d26);
  border:1px solid #33404f;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.6);
}
.led-unit{display:flex;align-items:center;gap:7px;}
.led-unit:last-child{justify-content:flex-end;}
.led{
  width:13px;height:13px;border-radius:50%;
  background:#2b3038;border:1px solid #0a0d11;
  box-shadow:inset 0 1px 2px rgba(0,0,0,.8), 0 0 0 2px rgba(0,0,0,.25);
  transition:.12s;
}
.led-red.on{
  background:radial-gradient(circle at 35% 30%,#ff8a8a,#ef4444 55%,#991b1b);
  box-shadow:0 0 10px 2px rgba(239,68,68,.75), inset 0 1px 1px rgba(255,255,255,.5);
}
.led-blue.on{
  background:radial-gradient(circle at 35% 30%,#a5d8ff,#3b82f6 55%,#1e40af);
  box-shadow:0 0 10px 2px rgba(59,130,246,.8), inset 0 1px 1px rgba(255,255,255,.5);
}
.led.blink{animation:ledBlink .6s steps(1) infinite;}
@keyframes ledBlink{0%,49%{opacity:1;}50%,100%{opacity:.15;}}
.led-cap{font:600 9.5px/1 var(--mono);color:#65788d;letter-spacing:.5px;}
.tx-logo{text-align:center;line-height:1;}
.logo-main{
  font:800 19px/1 var(--mono);letter-spacing:2px;
  color:#c9d6e4;text-shadow:0 1px 0 #fff2, 0 -1px 0 #0006;
}
.logo-sub{font:600 7.5px/1 var(--mono);letter-spacing:2.4px;color:#5d7085;margin-top:3px;}

/* ---------------- 液晶屏外壳 ---------------- */
.lcd-bezel{
  position:relative;margin:9px 0 0;padding:7px;
  border-radius:11px;
  background:linear-gradient(180deg,#0c1116,#151c25);
  border:1px solid #39465a;
  box-shadow:inset 0 2px 8px rgba(0,0,0,.85), 0 1px 0 rgba(255,255,255,.06);
}
.lcd-glare{
  position:absolute;inset:7px;border-radius:6px;pointer-events:none;
  background:linear-gradient(135deg,rgba(255,255,255,.10) 0%,rgba(255,255,255,.02) 22%,transparent 45%);
  mix-blend-mode:screen;
}
.lcd-keys-hint{
  text-align:center;font-size:10.5px;color:#6d8298;padding:5px 0 3px;letter-spacing:.3px;
  min-height:20px;
}

/* ---------------- 按键区 ---------------- */
.tx-keys{
  display:grid;grid-template-columns:1fr 52px 52px 40px 40px;
  gap:6px;align-items:stretch;margin-bottom:7px;
}
.touch-pad{
  position:relative;height:52px;border-radius:10px;cursor:pointer;
  background:
    radial-gradient(120% 90% at 50% 0%, #2c3a4a, #1a222c 70%);
  border:1px solid #3d4c5f;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10), inset 0 -4px 8px rgba(0,0,0,.5);
  display:grid;place-items:center;user-select:none;
  transition:.1s;
}
.touch-pad:active{transform:scale(.985);}
.touch-pad .tp-core{
  font:700 10.5px/1 var(--font);color:#8fa4ba;letter-spacing:.6px;
  padding:4px 8px;border-radius:6px;background:#0e151d;border:1px solid #2b3846;
}
.touch-pad .tp-z{
  position:absolute;color:#5f7286;font-size:9px;line-height:1;transition:.1s;
  padding:2px 5px;border-radius:4px;
}
.touch-pad .tp-z.hot{color:#38bdf8;background:rgba(56,189,248,.12);}
.tp-up{top:2px;left:50%;transform:translateX(-50%);}
.tp-down{bottom:2px;left:50%;transform:translateX(-50%);}
.tp-left{left:3px;top:50%;transform:translateY(-50%);}
.tp-right{right:3px;top:50%;transform:translateY(-50%);}
.touch-pad.dbl{box-shadow:0 0 0 2px rgba(56,189,248,.6) inset, inset 0 -4px 8px rgba(0,0,0,.5);}

.key{
  position:relative;border-radius:9px;cursor:pointer;
  background:linear-gradient(180deg,#39434f,#232b36);
  border:1px solid #4a5766;
  color:#cfdae6;
  font:700 10.5px/1.15 var(--mono);letter-spacing:.4px;
  padding:4px 2px;
  box-shadow:0 2px 0 #12181f, inset 0 1px 0 rgba(255,255,255,.16);
  transition:.08s;
  display:grid;place-items:center;text-align:center;
}
.key:active,.key.pressed{
  transform:translateY(2px);
  box-shadow:0 0 0 #12181f, inset 0 2px 6px rgba(0,0,0,.6);
  background:linear-gradient(180deg,#2b3f52,#1d3141);color:#7dd3fc;
}
.key-home{font-size:9px;}
.key-s1{background:linear-gradient(180deg,#4a3a2a,#2e2419);border-color:#5d4a33;color:#e8c9a0;}
.key-s1.down{background:linear-gradient(180deg,#6b4a22,#4a3116);color:#ffd08a;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
.key-s2{background:linear-gradient(180deg,#30394a,#1c232e);border-color:#455069;color:#b9c6dc;}
.key-s2.down{background:linear-gradient(180deg,#2a4a63,#17303f);color:#a5dbff;box-shadow:inset 0 2px 6px rgba(0,0,0,.6);}
.key small{font-size:8.5px;opacity:.85;letter-spacing:0;}

/* 手型切换（模拟器设置，非真机部件） */
.mode-strip{
  display:flex;align-items:center;gap:5px;margin-bottom:9px;
  padding:5px 7px;border-radius:9px;
  background:rgba(9,14,20,.55);border:1px dashed #33445a;
}
.ms-label{font-size:10px;color:#6c8299;letter-spacing:.5px;margin-right:2px;}
.mode-strip button{
  flex:1 1 0;padding:4px 2px;border-radius:6px;cursor:pointer;
  background:#1a2430;border:1px solid #2c3a4a;color:#8ea3b8;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;transition:.14s;
}
.mode-strip button:hover{border-color:#3d5a75;color:#cfe3f5;}
.mode-strip button.on{
  background:linear-gradient(180deg,#0e4a63,#0b3648);
  border-color:#1d7fa4;color:#a5e2ff;
  box-shadow:0 0 8px rgba(56,189,248,.25);
}

/* ---------------- 摇杆区 ---------------- */
.tx-deck{
  display:grid;grid-template-columns:1fr 116px 1fr;gap:4px;align-items:start;
  margin-top:2px;
}
.deck-side{display:flex;justify-content:center;}
.gimbal-wrap{position:relative;width:100%;display:flex;flex-direction:column;align-items:center;gap:5px;}
.gimbal{display:flex;flex-direction:column;align-items:center;gap:5px;}
.gimbal-well{
  position:relative;width:146px;height:146px;border-radius:50%;
  background:
    radial-gradient(circle at 50% 38%, #2b3441 0%, #161c24 58%, #0b1015 100%);
  border:2px solid #3a4655;
  box-shadow:
    inset 0 10px 22px rgba(0,0,0,.85),
    inset 0 -4px 10px rgba(0,0,0,.6),
    0 2px 0 rgba(255,255,255,.08);
  display:grid;place-items:center;
  cursor:grab;touch-action:none;
}
.gimbal-well:active{cursor:grabbing;}
.gimbal-ring{
  position:absolute;inset:12px;border-radius:50%;
  border:1px dashed #3b4a5c;opacity:.75;
}
.gimbal-ring::after{
  content:"";position:absolute;left:50%;top:50%;width:5px;height:5px;border-radius:50%;
  transform:translate(-50%,-50%);background:#3f4f63;
}
.stick{
  position:relative;width:0;height:0;
  will-change:transform;
}
.stick-cap{
  position:absolute;left:-17px;top:-17px;
  display:block;width:34px;height:34px;border-radius:50%;
  background:
    radial-gradient(circle at 40% 32%, #59636f, #2a313a 60%, #171c23);
  border:1px solid #5d6a78;
  box-shadow:0 6px 12px rgba(0,0,0,.7), inset 0 2px 3px rgba(255,255,255,.22);
}
.stick-cap::after{
  content:"";position:absolute;inset:9px;border-radius:50%;
  background:repeating-linear-gradient(45deg,#1a1f26 0 2px,#2d3540 2px 4px);
  opacity:.85;
}
.stick.dragging .stick-cap{
  border-color:#7dd3fc;
  box-shadow:0 0 0 3px rgba(56,189,248,.18), 0 6px 14px rgba(0,0,0,.75);
}
.gimbal-cap{
  font-size:10px;color:#7f93a8;letter-spacing:.4px;white-space:nowrap;
  display:flex;flex-direction:column;align-items:center;line-height:1.35;
}
.gimbal-cap b{color:#a8bccf;font-family:var(--mono);}
.gimbal-cap em{
  font-style:normal;font-size:9.5px;color:#7dd3fc;letter-spacing:.3px;font-weight:600;
}

/* 微调 */
.trim{
  position:absolute;display:flex;align-items:center;gap:2px;
  background:linear-gradient(180deg,#1a2029,#11161d);
  border:1px solid #384453;border-radius:7px;padding:2px 3px;
  box-shadow:inset 0 1px 3px rgba(0,0,0,.7);
  z-index:3;
}
.trim-v{flex-direction:column;left:-12px;top:22px;padding:3px 2px;}
.trim-h{flex-direction:row;position:relative;left:auto;bottom:auto;transform:none;margin-top:4px;}
.trim-v .t-track{width:9px;height:74px;}
.trim-h .t-track{width:74px;height:9px;}
.t-track{position:relative;background:#0a0e13;border-radius:5px;box-shadow:inset 0 0 3px #000;}
.t-mark{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:#4a5a6e;border-radius:1px;
}
.trim-v .t-mark{width:5px;height:1px;}
.trim-h .t-mark{width:1px;height:5px;}
.t-thumb{
  position:absolute;background:linear-gradient(180deg,#e8eef5,#93a3b4);
  border-radius:2px;box-shadow:0 0 3px rgba(0,0,0,.8);
}
.trim-v .t-thumb{left:50%;width:9px;height:5px;transform:translate(-50%,-50%);}
.trim-h .t-thumb{top:50%;width:5px;height:9px;transform:translate(-50%,-50%);}
.tbtn{
  border:1px solid #3b4757;background:linear-gradient(180deg,#2c3644,#1b222c);
  color:#93a6ba;border-radius:4px;cursor:pointer;
  display:grid;place-items:center;padding:0;line-height:1;
}
.trim-v .tbtn{width:17px;height:14px;font-size:7px;}
.trim-h .tbtn{width:14px;height:17px;font-size:7px;}
.tbtn:hover{color:#7dd3fc;border-color:#4b6a86;}
.tbtn:active{background:#182231;color:#38bdf8;}
.t-name{
  position:absolute;font:700 8px/1 var(--mono);color:#6f8299;
}
.trim-v .t-name{right:-19px;top:50%;transform:translateY(-50%);}
.trim-h .t-name{left:-19px;top:50%;transform:translateY(-50%);}
.trim.at-center .t-name{color:#22c55e;}

/* 中央电源区 */
.deck-center{
  display:flex;flex-direction:column;align-items:center;gap:8px;padding-top:6px;
  position:relative;
}
.power-sw{
  width:82px;border-radius:10px;cursor:pointer;
  background:linear-gradient(180deg,#1b222c,#121820);
  border:1px solid #3c4859;
  box-shadow:inset 0 2px 6px rgba(0,0,0,.8);
  padding:7px 6px 6px;display:flex;flex-direction:column;align-items:center;gap:5px;
  transition:.12s;
}
.ps-slot{
  width:44px;height:26px;border-radius:6px;position:relative;
  background:#05080b;border:1px solid #2a3542;
  box-shadow:inset 0 2px 5px #000;
}
.ps-knob{
  position:absolute;left:2px;right:2px;top:11px;height:13px;border-radius:5px;
  background:linear-gradient(180deg,#cfd8e3,#8fa0b3 55%,#5d6c7e);
  box-shadow:0 2px 4px rgba(0,0,0,.7);
  transition:top .12s cubic-bezier(.2,1.4,.4,1);
}
.power-sw.on .ps-knob{top:2px;background:linear-gradient(180deg,#a7f3d0,#34d399 55%,#059669);}
.ps-label{font:800 9px/1 var(--mono);letter-spacing:1.4px;color:#8296ab;}
.ps-state{
  font:700 8.5px/1 var(--mono);letter-spacing:1px;color:#5c6d80;
  padding:2px 5px;border-radius:4px;background:#0a1016;border:1px solid #232e3b;
}
.power-sw.on .ps-state{color:#4ade80;border-color:#1e5c3a;background:#08150e;}
.power-sw.warn{animation:swWarn .35s 2;}
@keyframes swWarn{0%,100%{transform:none;}25%{transform:translateX(-3px);}75%{transform:translateX(3px);}}
.center-knob{
  width:34px;height:34px;border-radius:50%;
  background:radial-gradient(circle at 40% 35%,#39434f,#1a2027 70%);
  border:1px solid #495663;display:grid;place-items:center;
  box-shadow:inset 0 1px 2px rgba(255,255,255,.12);
}
.center-knob span{
  width:12px;height:3px;background:#5c6a7a;border-radius:2px;
  box-shadow:0 -4px 0 #39434f, 0 4px 0 #39434f;
}

/* ---------------- 部件标注（认识模式） ---------------- */
.parts-layer{position:absolute;inset:0;pointer-events:none;z-index:12;}
.part-pin{
  position:absolute;left:var(--x);top:var(--y);
  transform:translate(-50%,-50%);
  pointer-events:auto;cursor:pointer;
  font-size:10.5px;font-weight:700;letter-spacing:.2px;
  color:#05202f;white-space:nowrap;
  background:linear-gradient(180deg,#fef08a,#fbbf24);
  border:1px solid #fcd34d;border-radius:20px;
  padding:2px 7px;
  box-shadow:0 4px 12px rgba(0,0,0,.5);
  animation:pinIn .25s ease backwards;
}
.part-pin::before{
  content:"";position:absolute;left:-6px;top:50%;transform:translateY(-50%);
  width:6px;height:6px;border-radius:50%;background:#fbbf24;
  box-shadow:0 0 0 3px rgba(251,191,36,.28);
}
.part-pin:hover{background:linear-gradient(180deg,#fde68a,#f59e0b);}
.part-pin.found{
  background:linear-gradient(180deg,#bbf7d0,#22c55e);border-color:#4ade80;color:#04230f;
}
.part-pin.found::before{background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.3);}
@keyframes pinIn{from{opacity:0;transform:translate(-50%,-50%) scale(.7);}to{opacity:1;transform:translate(-50%,-50%) scale(1);}}

/* 小角标（电源 01 / 触摸 05） */
.part-tag{
  position:absolute;right:2px;bottom:2px;
  font:700 8px/1 var(--mono);color:#0b1016;
  background:#94a3b8;border-radius:4px;padding:2px 3px;
  opacity:0;transition:.15s;pointer-events:none;
}
body.parts-on .part-tag{opacity:1;}

/* ---------------- 尺寸适配 ---------------- */
@media (max-height:820px){
  .tx{--tx-w:404px;}
  .gimbal-well{width:122px;height:122px;}
  .lcd-bezel{padding:6px;}
  .lcd-screen{height:160px;font-size:12px;}
  .tx-keys{grid-template-columns:1fr 50px 50px 38px 38px;margin-bottom:5px;}
  .touch-pad{height:44px;}
  .tx-topstrip{padding:6px 10px 4px;}
  .tx-deck{margin-top:0;}
  .gimbal-cap{font-size:9.5px;}
  .mode-strip{padding:4px 6px;margin-bottom:7px;}
}
@media (max-height:700px){
  .gimbal-well{width:110px;height:110px;}
  .lcd-screen{height:146px;}
}