@charset "utf-8";
/* ============================================================
   hb-phone.css — 控制页手机外壳（蜂鸟同款）
   移植自 蜂鸟 panel_site/assets/index-D-8wpIgw.css 的 .phone-*
   充电：绿色线缆流光 + 接口呼吸 + 机身绿光 + 闪电脉动
   ============================================================ */

.hb-phone-col{position:relative}

.hb-chassis{
  position:absolute;z-index:0;pointer-events:none;
  border-radius:34px;
  background:linear-gradient(165deg,#3f434c 0%,#1c1f26 38%,#12141a 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.28),0 18px 40px rgba(16,24,40,.20),inset 0 1px rgba(255,255,255,.18);
  transition:box-shadow .5s ease;
}
.hb-chassis.is-charging{
  box-shadow:0 2px 8px rgba(0,0,0,.28),0 18px 40px rgba(16,185,129,.20),
             0 0 26px rgba(52,211,153,.18),inset 0 1px rgba(255,255,255,.18);
}

.hb-phone-col > div.bg-black{border-radius:22px !important}

.hb-deco{
  position:absolute;z-index:6;pointer-events:none;
}

.hb-d-btn{position:absolute;background:#2a2e36;width:3px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.hb-d-vol{border-radius:3px 0 0 3px;height:64px;left:-13px}
.hb-d-pwr{border-radius:0 3px 3px 0;height:42px;right:-13px}
.hb-d-notch{
  position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;
  background:#050608;border-radius:50%;
  box-shadow:0 0 0 1.5px #2c3038,inset 0 0 0 2px #1a1d24;
}
.hb-d-chin{
  position:absolute;left:50%;width:86px;height:4px;margin-left:-43px;
  background:rgba(255,255,255,.16);border-radius:99px;
}
.hb-d-port{
  position:absolute;left:50%;width:16px;height:4px;margin-left:-8px;
  background:#050608;border-radius:1px;
  box-shadow:inset 0 1px rgba(255,255,255,.14),0 0 0 1px rgba(0,0,0,.42);
  transition:background .3s,box-shadow .3s;
}
.hb-d-port.is-charging{
  background:#062016;
  box-shadow:0 0 0 1px rgba(52,211,153,.45),0 0 10px 2px rgba(16,185,129,.55);
  animation:hb-port-charge 1.4s ease-in-out infinite;
}

.hb-d-bolt{
  display:none;position:absolute;left:50%;width:16px;height:16px;margin-left:-8px;
  color:#6ee7b7;filter:drop-shadow(0 0 6px rgba(52,211,153,.95));
  animation:hb-bolt 1.2s ease-in-out infinite;
}
.hb-d-bolt svg{width:16px;height:16px;display:block}

.hb-d-cable{
  display:none;position:absolute;left:50%;width:36px;height:52px;margin-left:-18px;
  filter:drop-shadow(0 8px 10px rgba(16,24,40,.28));
  animation:hb-cable-in .42s ease-out;
}
.hb-d-cable svg{width:100%;height:100%;display:block}
.hb-d-flow{stroke-dasharray:5 16;animation:hb-flow 1.05s linear infinite}

.hb-deco.is-plugged .hb-d-cable{display:block}
.hb-deco.is-plugged .hb-d-bolt{display:block}

@keyframes hb-flow{to{stroke-dashoffset:-42px}}
@keyframes hb-port-charge{50%{box-shadow:0 0 0 1px rgba(52,211,153,.7),0 0 16px 4px rgba(16,185,129,.8)}}
@keyframes hb-bolt{50%{opacity:.55;transform:scale(.92)}}
@keyframes hb-cable-in{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  .hb-d-flow,.hb-d-port.is-charging,.hb-d-bolt{animation:none}
}