.ewb {
  position: relative; width: 100%; max-width: 620px; margin-inline: auto;
  aspect-ratio: 600 / 552;
  border-radius: 22px; overflow: hidden; direction: ltr;
  background: radial-gradient(120% 95% at 50% 0%, #0B2347 0%, #071A38 48%, #061634 100%);
  border: 1px solid rgba(120,160,230,.16);
  box-shadow: 0 40px 100px rgba(3,10,30,.5), inset 0 1px 0 rgba(255,255,255,.05);
}
.ewb-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.ewb-overlay { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.ewb-fade { opacity: 0; transition: opacity .7s cubic-bezier(.22,1,.36,1); }
.ewb-fade.in { opacity: 1; }

.ewb-label {
  position: absolute; left: 0; top: 0; transform: translate(-9999px,-9999px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  text-align: center; white-space: nowrap; pointer-events: none;
  will-change: transform;
}
.ewb-label .t { font-size: 12.5px; font-weight: 600; color: #EAF2FF; letter-spacing: .01em; text-shadow: 0 1px 8px rgba(0,8,24,.8); }
.ewb-label .c { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; text-transform: uppercase; color: rgba(180,205,245,.6); }
.ewb-label.secondary .t { font-size: 10.5px; font-weight: 500; color: rgba(214,228,255,.78); }
.ewb-label.secondary .c { display: none; }
.ewb-label.dim { opacity: .35; transition: opacity .3s; }

.ewb-hit { position: absolute; left: 0; top: 0; border-radius: 50%; transform: translate(-9999px,-9999px); pointer-events: auto; cursor: pointer; }

.ewb-tip {
  position: absolute; left: 0; top: 0; width: 230px; pointer-events: none; z-index: 5;
  background: rgba(9,22,48,.93); backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid var(--tip-c, rgba(140,175,240,.3)); border-radius: 13px; padding: 13px 15px;
  box-shadow: 0 22px 50px rgba(0,4,18,.6);
  opacity: 0; transform: translate(-9999px,-9999px) scale(.96); transition: opacity .2s, transform .2s;
}
.ewb-tip.show { opacity: 1; }
.ewb-tip .h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ewb-tip .h .dot { width: 9px; height: 9px; border-radius: 50%; background: var(--tip-c); box-shadow: 0 0 10px var(--tip-c); flex: none; }
.ewb-tip .h b { font-size: 13px; font-weight: 600; color: #fff; }
.ewb-tip p { margin: 0; font-size: 11.5px; line-height: 1.7; color: rgba(206,222,252,.78); white-space: normal; }

.ewb-corner { position: absolute; width: 22px; height: 22px; border: 1.5px solid rgba(130,170,235,.3); }
.ewb-corner.tl { top: 14px; left: 14px; border-right: 0; border-bottom: 0; border-radius: 5px 0 0 0; }
.ewb-corner.tr { top: 14px; right: 14px; border-left: 0; border-bottom: 0; border-radius: 0 5px 0 0; }
.ewb-corner.bl { bottom: 14px; left: 14px; border-right: 0; border-top: 0; border-radius: 0 0 0 5px; }
.ewb-corner.br { bottom: 14px; right: 14px; border-left: 0; border-top: 0; border-radius: 0 0 5px 0; }
.ewb-status {
  position: absolute; top: 16px; right: 42px; display: flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: rgba(150,255,190,.8); text-transform: uppercase;
}
.ewb-status .led { width: 7px; height: 7px; border-radius: 50%; background: #6EE7A8; box-shadow: 0 0 8px #6EE7A8; animation: ewbLed 1.8s ease-in-out infinite; }
@keyframes ewbLed { 0%,100%{ opacity: 1; } 50%{ opacity: .35; } }
.ewb-legend {
  position: absolute; left: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 6px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; color: rgba(190,210,245,.7);
}
.ewb-legend .lg { display: flex; align-items: center; gap: 7px; }
.ewb-legend .lg i { width: 8px; height: 8px; border-radius: 2px; flex: none; }
.ewb-scan {
  position: absolute; left: 0; right: 0; height: 140px; top: -140px; pointer-events: none; z-index: 3;
  background: linear-gradient(180deg, transparent, rgba(120,170,255,.05) 60%, rgba(150,190,255,.09));
  animation: ewbScan 7s linear infinite;
}
@keyframes ewbScan { 0%{ transform: translateY(0); } 100%{ transform: translateY(720px); } }

@media (max-width: 760px){
  .ewb { max-width: 460px; aspect-ratio: 1 / 1; }
  .ewb-label .t { font-size: 11px; }
  .ewb-legend { font-size: 8px; }
  .ewb-status { display: none; }
}
@media (prefers-reduced-motion: reduce){
  .ewb-scan, .ewb-status .led { animation: none; }
  .ewb-scan { display: none; }
}
.ewb-fallback {
  position: absolute; inset: 0; display: none; place-items: center; text-align: center; padding: 30px;
  color: rgba(214,228,255,.7); font-size: 14px; line-height: 1.9;
}
.ewb.no-webgl .ewb-canvas { display: none; }
.ewb.no-webgl .ewb-fallback { display: grid; }