:root{
  --bg:#05080b;
  --bg2:#080c10;
  --panel:#090e13;
  --panel2:#0c1218;
  --line:rgba(255,255,255,.075);
  --line2:rgba(255,255,255,.12);
  --text:#e9eff4;
  --muted:#72808b;
  --cyan:#31e3c2;
  --critical:#ff315f;
  --high:#ff8737;
  --medium:#eed04b;
  --low:#31e3c2;
  --blue:#68a9ff;
}

*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text)}
body{
  overflow:hidden;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:
    radial-gradient(circle at 18% -10%,rgba(49,227,194,.055),transparent 30%),
    radial-gradient(circle at 95% 10%,rgba(104,169,255,.035),transparent 27%),
    #05080b;
}

button{font:inherit}
button:focus-visible{outline:1px solid var(--cyan);outline-offset:2px}

.noise{
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:9999;
  opacity:.025;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

.app-shell{
  height:100vh;
  min-height:560px;
  display:grid;
  grid-template-rows:76px minmax(0,1fr) 62px;
}

.topbar,
.bottom-bar{
  position:relative;
  z-index:100;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:rgba(4,7,10,.95);
  backdrop-filter:blur(18px);
}

.topbar{
  padding:0 22px;
  border-bottom:1px solid var(--line);
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
}

.brand-mark{
  position:relative;
  width:42px;
  height:42px;
  border:1px solid rgba(49,227,194,.23);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:3px;
  padding:9px;
  background:
    linear-gradient(180deg,rgba(49,227,194,.055),rgba(49,227,194,.01));
  box-shadow:
    inset 0 0 24px rgba(49,227,194,.055),
    0 0 30px rgba(49,227,194,.025);
}

.brand-mark:before,
.brand-mark:after{
  content:"";
  position:absolute;
  background:rgba(49,227,194,.45);
}

.brand-mark:before{
  width:7px;
  height:1px;
  left:-4px;
  top:8px;
}

.brand-mark:after{
  height:7px;
  width:1px;
  right:8px;
  bottom:-4px;
}

.brand-mark span{
  width:4px;
  background:var(--cyan);
  box-shadow:0 0 12px rgba(49,227,194,.65);
}

.brand-mark span:nth-child(1){height:9px;opacity:.66}
.brand-mark span:nth-child(2){height:21px}
.brand-mark span:nth-child(3){height:15px;opacity:.86}
.brand-mark span:nth-child(4){height:27px;opacity:.46}

.eyebrow,
.tiny-label,
.bottom-label,
.detail-kicker{
  font-size:9px;
  font-weight:800;
  letter-spacing:.18em;
  color:#78858f;
}

h1{
  margin:3px 0 0;
  font-size:18px;
  line-height:1;
  letter-spacing:.15em;
  font-weight:900;
}

.top-stats{
  display:flex;
  align-items:center;
  gap:22px;
}

.top-stat{
  min-width:72px;
  display:flex;
  flex-direction:column;
  gap:3px;
}

.top-stat span{
  font-size:8px;
  color:#67747f;
  letter-spacing:.14em;
}

.top-stat strong{
  font:800 14px/1 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:#dae3ea;
}

.danger-stat strong{color:#ff7e9a}

.connection{
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 11px;
  border:1px solid var(--line);
  border-radius:999px;
  font-size:9px;
  letter-spacing:.11em;
  font-weight:900;
  color:#a6b0b9;
  background:rgba(255,255,255,.018);
}

.connection i{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 13px rgba(49,227,194,.85);
  animation:statusPulse 1.8s ease-in-out infinite;
}

@keyframes statusPulse{
  50%{opacity:.35;box-shadow:0 0 4px rgba(49,227,194,.35)}
}

.main-grid{
  min-height:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 390px;
}

.map-panel{
  position:relative;
  min-width:0;
  overflow:hidden;
  border-right:1px solid var(--line);
  background:#070b0f;
}

.world-image{
  position:absolute;
  z-index:1;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  pointer-events:none;
  opacity:.98;
  filter:
    drop-shadow(0 0 30px rgba(0,0,0,.2))
    contrast(1.02);
}

.geo-grid{
  position:absolute;
  z-index:2;
  inset:0;
  pointer-events:none;
  opacity:.25;
  background-image:
    linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);
  background-size:12.5% 25%;
}

.geo-grid:after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,transparent 49.9%,rgba(49,227,194,.06) 50%,transparent 50.1%),
    linear-gradient(transparent 49.9%,rgba(49,227,194,.045) 50%,transparent 50.1%);
}

.attack-overlay{
  position:absolute;
  z-index:5;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  overflow:visible;
}

.map-shade{
  position:absolute;
  z-index:6;
  inset:0;
  pointer-events:none;
  box-shadow:
    inset 0 0 110px rgba(0,0,0,.78),
    inset 0 90px 100px rgba(0,0,0,.18),
    inset 0 -70px 100px rgba(0,0,0,.25);
}

.scan-bar{
  position:absolute;
  z-index:4;
  left:0;
  right:0;
  top:-15%;
  height:18%;
  pointer-events:none;
  opacity:.25;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(49,227,194,.025) 50%,
    rgba(49,227,194,.08) 93%,
    rgba(49,227,194,.35) 100%
  );
  filter:blur(.2px);
  animation:scan 7s linear infinite;
}

@keyframes scan{
  from{transform:translateY(-10vh)}
  to{transform:translateY(130vh)}
}

.glass{
  background:rgba(5,9,12,.78);
  border:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(13px);
  box-shadow:0 18px 55px rgba(0,0,0,.26);
}

.map-head{
  position:absolute;
  z-index:20;
  top:18px;
  left:18px;
  min-width:285px;
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 13px;
}

.map-head strong{
  display:block;
  margin-top:2px;
  font-size:11px;
  color:#c8d2da;
  font-weight:700;
}

.live-badge{
  display:flex;
  align-items:center;
  gap:7px;
  padding-right:12px;
  border-right:1px solid var(--line);
  color:#dce4ea;
  font-size:9px;
  letter-spacing:.14em;
  font-weight:900;
}

.live-badge span{
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--critical);
  box-shadow:0 0 13px var(--critical);
  animation:blink 1.1s ease-in-out infinite;
}

@keyframes blink{50%{opacity:.2}}

.map-corner{
  position:absolute;
  z-index:20;
  color:#52616c;
  font:8px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  pointer-events:none;
}

.map-corner span{display:block}
.map-corner.top-right{top:18px;right:18px;text-align:right}
.map-corner.bottom-right{right:18px;bottom:18px}

.legend{
  position:absolute;
  z-index:20;
  bottom:18px;
  left:18px;
  display:flex;
  gap:14px;
  padding:10px 12px;
  color:#8b98a2;
  font-size:9px;
}

.legend span{
  display:flex;
  align-items:center;
  gap:6px;
}

.legend-dot{
  width:6px;
  height:6px;
  border-radius:50%;
}

.legend-dot.critical{background:var(--critical);box-shadow:0 0 8px var(--critical)}
.legend-dot.high{background:var(--high);box-shadow:0 0 8px var(--high)}
.legend-dot.medium{background:var(--medium);box-shadow:0 0 8px var(--medium)}
.legend-dot.low{background:var(--low);box-shadow:0 0 8px var(--low)}

.stream-panel{
  min-height:0;
  display:grid;
  grid-template-rows:auto auto auto minmax(0,1fr);
  background:
    linear-gradient(rgba(255,255,255,.013) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.013) 1px,transparent 1px),
    #070b0f;
  background-size:27px 27px;
}

.stream-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:18px 18px 14px;
}

.stream-header h2{
  margin:4px 0 0;
  font-size:20px;
  letter-spacing:-.02em;
}

.icon-button{
  display:flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:5px;
  padding:8px 10px;
  background:rgba(255,255,255,.02);
  color:#a0abb4;
  cursor:pointer;
}

.icon-button:hover{
  color:#eef4f7;
  border-color:var(--line2);
  background:rgba(255,255,255,.04);
}

#pauseIcon{
  color:var(--cyan);
  font:bold 11px ui-monospace,SFMono-Regular,monospace;
}

#pauseText{font-size:10px}

.filters{
  display:flex;
  gap:5px;
  padding:0 18px 13px;
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
}

.filters::-webkit-scrollbar{display:none}

.filter{
  appearance:none;
  border:1px solid transparent;
  border-radius:999px;
  padding:6px 8px;
  background:transparent;
  color:#667580;
  font-size:9px;
  letter-spacing:.08em;
  cursor:pointer;
}

.filter:hover,
.filter.active{
  color:#edf3f6;
  background:rgba(255,255,255,.04);
  border-color:rgba(255,255,255,.075);
}

.stream-meta{
  display:flex;
  justify-content:space-between;
  padding:9px 18px;
  border-bottom:1px solid rgba(255,255,255,.045);
  color:#586671;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}

.stream-meta span{
  display:flex;
  align-items:center;
  gap:6px;
}

.pulse-dot{
  width:5px;
  height:5px;
  background:var(--cyan);
  border-radius:50%;
  box-shadow:0 0 8px rgba(49,227,194,.65);
}

.attack-list{
  min-height:0;
  overflow:auto;
  padding:9px 9px 24px;
  scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.08) transparent;
}

.attack-list::-webkit-scrollbar{width:6px}
.attack-list::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08)}

.attack-card{
  position:relative;
  width:100%;
  display:grid;
  grid-template-columns:4px minmax(0,1fr);
  padding:0;
  margin:0 0 7px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.062);
  border-radius:5px;
  color:inherit;
  text-align:left;
  background:
    linear-gradient(120deg,rgba(255,255,255,.02),transparent 60%),
    rgba(9,14,19,.88);
  cursor:pointer;
  transition:
    transform .14s ease,
    border-color .14s ease,
    background .14s ease;
}

.attack-card:before{
  content:"";
  position:absolute;
  right:0;
  top:0;
  width:35%;
  height:1px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.08));
}

.attack-card:hover{
  transform:translateX(-3px);
  border-color:rgba(255,255,255,.115);
  background:
    linear-gradient(120deg,rgba(255,255,255,.034),transparent 60%),
    rgba(13,19,25,.95);
}

.attack-card.selected{
  border-color:rgba(49,227,194,.28);
  box-shadow:inset 0 0 0 1px rgba(49,227,194,.035);
}

.severity-strip.critical{background:var(--critical);box-shadow:0 0 12px rgba(255,49,95,.75)}
.severity-strip.high{background:var(--high);box-shadow:0 0 12px rgba(255,135,55,.7)}
.severity-strip.medium{background:var(--medium);box-shadow:0 0 12px rgba(238,208,75,.55)}
.severity-strip.low{background:var(--low);box-shadow:0 0 12px rgba(49,227,194,.55)}

.attack-content{padding:10px 11px}

.attack-top{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
}

.attack-type{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  font-size:10px;
  font-weight:850;
  letter-spacing:.055em;
  color:#dbe3e9;
}

.attack-time{
  flex:0 0 auto;
  color:#56646f;
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.attack-route-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:6px;
  margin-top:6px;
  color:#9eabb5;
  font:10px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.attack-route-line span{
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.attack-route-line b{
  color:#44535f;
  font-weight:600;
}

.attack-meta{
  display:flex;
  gap:5px;
  flex-wrap:wrap;
  margin-top:7px;
}

.tag{
  border:1px solid rgba(255,255,255,.065);
  border-radius:3px;
  padding:3px 5px;
  background:rgba(255,255,255,.018);
  color:#667580;
  font-size:8px;
  letter-spacing:.05em;
}

.tag.blocked{
  color:var(--low);
  border-color:rgba(49,227,194,.13);
}

.tag.passed{
  color:var(--critical);
  border-color:rgba(255,49,95,.16);
}

.detail-panel{
  position:absolute;
  z-index:40;
  top:18px;
  right:18px;
  width:min(380px,calc(100% - 36px));
  padding:18px;
  background:rgba(6,10,14,.95);
  border:1px solid rgba(255,255,255,.095);
  box-shadow:
    0 25px 90px rgba(0,0,0,.48),
    inset 0 0 50px rgba(49,227,194,.018);
  backdrop-filter:blur(18px);
  transform:translateX(calc(100% + 40px));
  opacity:0;
  transition:
    transform .24s cubic-bezier(.2,.8,.2,1),
    opacity .2s ease;
}

.detail-panel.open{
  transform:translateX(0);
  opacity:1;
}

.detail-panel:before{
  content:"";
  position:absolute;
  left:-1px;
  top:0;
  bottom:0;
  width:2px;
  background:linear-gradient(
    to bottom,
    transparent,
    rgba(49,227,194,.75),
    transparent
  );
}

.detail-close{
  position:absolute;
  top:8px;
  right:9px;
  width:34px;
  height:34px;
  border:0;
  background:transparent;
  color:#74828d;
  font-size:24px;
  cursor:pointer;
}

.detail-close:hover{color:#fff}

.detail-panel h2{
  margin:4px 38px 11px 0;
  font-size:19px;
  letter-spacing:-.02em;
}

.severity-banner{
  display:inline-flex;
  align-items:center;
  gap:7px;
  border:1px solid var(--line);
  border-radius:999px;
  padding:5px 8px;
  color:#9ba7b0;
  font-size:9px;
  letter-spacing:.1em;
}

.severity-banner span{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--medium);
  box-shadow:0 0 8px currentColor;
}

.detail-route{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  gap:10px;
  align-items:center;
  margin-top:16px;
  padding:12px;
  border:1px solid rgba(255,255,255,.055);
  background:rgba(255,255,255,.018);
}

.detail-route>div:not(.route-arrow){
  min-width:0;
}

.detail-route span{
  display:block;
  margin-bottom:5px;
  color:#5d6a75;
  font-size:8px;
  letter-spacing:.12em;
}

.detail-route strong,
.detail-route small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}

.detail-route strong{
  color:#d4dde4;
  font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.detail-route small{
  margin-top:3px;
  color:#61707b;
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.route-arrow{
  color:#40515d;
  font:18px ui-monospace,SFMono-Regular,monospace;
}

.detail-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:11px;
  margin-top:13px;
}

.detail-grid>div{
  border-top:1px solid var(--line);
  padding-top:8px;
}

.detail-grid span,
.detail-fingerprint span{
  display:block;
  margin-bottom:5px;
  color:#5e6c77;
  font-size:8px;
  letter-spacing:.11em;
}

.detail-grid strong{
  color:#d9e1e7;
  font:11px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.detail-fingerprint{
  margin-top:12px;
  padding-top:9px;
  border-top:1px solid var(--line);
}

.detail-fingerprint code{
  display:block;
  padding:7px 8px;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
  background:rgba(255,255,255,.02);
  color:#7e8d98;
  font-size:9px;
}

.detail-time{
  margin-top:12px;
  color:#52606b;
  font:9px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.bottom-bar{
  padding:0 22px;
  gap:20px;
  border-top:1px solid var(--line);
}

.target-section{
  display:flex;
  align-items:center;
  gap:13px;
  min-width:0;
}

.server-chips{
  display:flex;
  gap:7px;
  min-width:0;
  overflow:hidden;
}

.server-chip{
  display:flex;
  align-items:center;
  gap:6px;
  white-space:nowrap;
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.06);
  background:rgba(255,255,255,.018);
  color:#7e8c97;
  font-size:9px;
}

.server-chip i{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--cyan);
  box-shadow:0 0 8px rgba(49,227,194,.7);
}

.ticker{
  flex:1;
  min-width:40px;
  overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 10%,#000 90%,transparent);
  opacity:.55;
}

.ticker-track{
  width:max-content;
  color:#42505b;
  font:8px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.15em;
  animation:ticker 22s linear infinite;
}

@keyframes ticker{
  from{transform:translateX(20%)}
  to{transform:translateX(-65%)}
}

.utc-clock{
  display:flex;
  align-items:center;
  gap:10px;
  flex:0 0 auto;
}

.utc-clock span{
  color:#687580;
  font-size:9px;
  letter-spacing:.15em;
}

.utc-clock strong{
  min-width:70px;
  color:#d4dce2;
  font:800 12px ui-monospace,SFMono-Regular,Menlo,monospace;
}

.server-core{
  fill:url(#targetCore);
  filter:url(#glow);
}

.server-ring{
  fill:none;
  stroke:#31e3c2;
  stroke-width:1.3;
  opacity:.75;
  transform-box:fill-box;
  transform-origin:center;
  animation:targetRing 1.9s ease-out infinite;
}

.server-cross{
  stroke:rgba(49,227,194,.38);
  stroke-width:.8;
}

@keyframes targetRing{
  from{transform:scale(.45);opacity:.9}
  to{transform:scale(3.2);opacity:0}
}

.server-label{
  fill:#6d7c87;
  font:800 9px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
}

.attack-arc{
  fill:none;
  stroke-width:1.45;
  stroke-linecap:round;
  stroke-dasharray:10 8;
  opacity:.92;
  filter:url(#glow);
  animation:dashMove .6s linear infinite;
}

.attack-arc.hot{stroke-width:1.9}

@keyframes dashMove{
  to{stroke-dashoffset:-18}
}

.source-core{filter:url(#glow)}
.source-ring{
  fill:none;
  stroke-width:1.2;
  transform-box:fill-box;
  transform-origin:center;
  animation:sourceRing 1.35s ease-out infinite;
}

@keyframes sourceRing{
  from{transform:scale(.35);opacity:.95}
  to{transform:scale(3);opacity:0}
}

.packet{
  filter:url(#bigGlow);
}

.impact-ring{
  fill:none;
  stroke-width:1.1;
  transform-box:fill-box;
  transform-origin:center;
  animation:impact 1.1s ease-out infinite;
}

@keyframes impact{
  from{transform:scale(.3);opacity:1}
  to{transform:scale(2.7);opacity:0}
}

.empty-state{
  margin:28px 18px;
  border:1px dashed rgba(255,255,255,.07);
  padding:22px 16px;
  color:#53616c;
  text-align:center;
  font:9px/1.7 ui-monospace,SFMono-Regular,Menlo,monospace;
}

@media(max-width:1100px){
  .main-grid{grid-template-columns:minmax(0,1fr) 340px}
  .top-stat:nth-child(2){display:none}
  .map-corner.top-right{display:none}
}

@media(max-width:900px){
  body{overflow:auto}
  .app-shell{
    height:auto;
    min-height:100svh;
    grid-template-rows:auto auto auto;
  }

  .topbar{min-height:72px}
  .top-stat:nth-child(-n+3){display:none}
  .danger-stat{display:flex!important}

  .main-grid{
    grid-template-columns:1fr;
    grid-template-rows:minmax(470px,62svh) 440px;
  }

  .map-panel{
    border-right:0;
    border-bottom:1px solid var(--line);
  }

  .stream-panel{min-height:440px}
  .bottom-bar{min-height:62px}
  .ticker{display:none}
}

@media(max-width:620px){
  .app-shell{min-height:100svh}
  .topbar,.bottom-bar{padding-left:12px;padding-right:12px}
  .brand{gap:9px}
  .brand-mark{width:36px;height:36px;padding:7px}
  .eyebrow{display:none}
  h1{font-size:13px}
  .top-stats{gap:7px}
  .danger-stat{display:none!important}
  .connection{padding:7px 9px}

  .main-grid{grid-template-rows:minmax(420px,58svh) 440px}

  .map-head{
    top:10px;
    left:10px;
    min-width:0;
    max-width:calc(100% - 20px);
  }

  .map-corner.bottom-right{display:none}

  .legend{
    bottom:10px;
    left:10px;
    max-width:calc(100% - 20px);
    overflow-x:auto;
  }

  .detail-panel{
    top:10px;
    right:10px;
    width:calc(100% - 20px);
  }

  .bottom-label{display:none}
  .server-chips{max-width:62vw}
}


/* =========================================================
   AVATEL BRAND LAYER
   ========================================================= */

:root{
  --avatel-accent:#31e3c2;
  --avatel-blue:#69a7ff;
  --avatel-ink:#071018;
}

.avatel-wordmark{
  display:block;
  margin-bottom:2px;
  color:#f2f7fb;
  font-size:10px;
  font-weight:950;
  letter-spacing:.34em;
  text-shadow:
    0 0 14px rgba(49,227,194,.12),
    0 0 24px rgba(105,167,255,.08);
}

.brand-copy{
  min-width:0;
}

.brand-copy h1{
  background:linear-gradient(90deg,#f5fbff 0%,#cfe0e9 55%,#89a6b9 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.avatel-mark{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  padding:0;
  border-color:rgba(49,227,194,.28);
  background:
    linear-gradient(145deg,rgba(49,227,194,.095),rgba(105,167,255,.03)),
    rgba(5,10,14,.85);
  box-shadow:
    inset 0 0 28px rgba(49,227,194,.07),
    0 0 32px rgba(49,227,194,.035);
}

.avatel-mark .ava-a{
  width:auto!important;
  height:auto!important;
  background:none!important;
  color:#62f2dc;
  font:950 24px/1 ui-sans-serif,system-ui,sans-serif;
  letter-spacing:-.12em;
  transform:translateX(-1px);
  text-shadow:
    0 0 10px rgba(49,227,194,.65),
    0 0 22px rgba(49,227,194,.22);
}

.avatel-mark:before{
  width:11px;
  left:-6px;
  background:linear-gradient(90deg,transparent,var(--avatel-accent));
}

.avatel-mark:after{
  height:11px;
  bottom:-6px;
  background:linear-gradient(transparent,var(--avatel-accent));
}

.avatel-map-head{
  min-width:355px;
  border-color:rgba(49,227,194,.1);
  box-shadow:
    0 18px 55px rgba(0,0,0,.28),
    inset 0 0 45px rgba(49,227,194,.018);
}

.map-brand-tag{
  align-self:stretch;
  display:flex;
  align-items:center;
  padding:0 11px 0 1px;
  border-right:1px solid rgba(255,255,255,.075);
  color:#6df3dd;
  font-size:9px;
  font-weight:950;
  letter-spacing:.22em;
}

.map-head .live-badge{
  border-right:1px solid rgba(255,255,255,.075);
}

.connection.online{
  border-color:rgba(49,227,194,.1);
  box-shadow:inset 0 0 22px rgba(49,227,194,.018);
}

.stream-header h2:before{
  content:"AVATEL ";
  color:#6d7b86;
  font-size:.52em;
  letter-spacing:.14em;
  vertical-align:middle;
  margin-right:5px;
}

.bottom-bar{
  box-shadow:0 -18px 60px rgba(0,0,0,.22);
}

.server-chip{
  border-color:rgba(49,227,194,.07);
  background:
    linear-gradient(90deg,rgba(49,227,194,.025),transparent),
    rgba(255,255,255,.014);
}

.detail-panel{
  border-top-color:rgba(49,227,194,.16);
}

.detail-kicker:before{
  content:"AVATEL / ";
  color:#62d9c6;
}

@media(max-width:620px){
  .avatel-wordmark{font-size:8px;letter-spacing:.24em}
  .avatel-mark{width:38px;height:38px}
  .avatel-mark .ava-a{font-size:20px}
  .avatel-map-head{min-width:0}
  .map-brand-tag{display:none}
}


/* =========================================================
   OFFICIAL AVATEL LOGO / COLOR BRANDING
   Colors sampled from the supplied AVATEL artwork:
   green  #b1bf63
   orange #eb8713
   blue   #1185cc
   grey   #464646
   ========================================================= */

:root{
  --avatel-green:#b1bf63;
  --avatel-orange:#eb8713;
  --avatel-blue:#1185cc;
  --avatel-grey:#464646;
}

.official-mark{
  position:relative;
  width:47px;
  height:47px;
  flex:0 0 47px;
  display:grid;
  place-items:center;
  border:1px solid rgba(17,133,204,.22);
  background:
    radial-gradient(circle at 50% 30%,rgba(17,133,204,.08),transparent 58%),
    rgba(255,255,255,.012);
  box-shadow:
    inset 0 0 28px rgba(17,133,204,.045),
    0 0 24px rgba(17,133,204,.025);
}

.official-mark:before,
.official-mark:after{
  content:"";
  position:absolute;
  pointer-events:none;
}

.official-mark:before{
  left:-1px;
  right:-1px;
  top:-1px;
  height:1px;
  background:linear-gradient(90deg,var(--avatel-green),var(--avatel-orange),var(--avatel-blue));
  opacity:.75;
}

.official-mark:after{
  width:5px;
  height:5px;
  right:-3px;
  bottom:7px;
  background:var(--avatel-blue);
  box-shadow:0 0 10px rgba(17,133,204,.75);
}

.official-triangle{
  display:block;
  width:34px;
  height:auto;
  filter:drop-shadow(0 0 8px rgba(17,133,204,.18));
}

.official-wordmark{
  display:block;
  width:158px;
  max-width:42vw;
  height:auto;
  margin:0 0 3px;
  filter:
    drop-shadow(0 0 1px rgba(255,255,255,.30))
    drop-shadow(0 0 8px rgba(17,133,204,.04));
}

.brand-copy .eyebrow{
  font-size:8px;
  letter-spacing:.15em;
  color:#7d8992;
}

.brand-copy h1{
  margin-top:4px;
  background:linear-gradient(
    90deg,
    #f5f8fa 0%,
    #e0e7ec 58%,
    #9aacb8 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.topbar:after{
  content:"";
  position:absolute;
  left:0;
  bottom:-1px;
  width:28%;
  height:1px;
  background:linear-gradient(
    90deg,
    var(--avatel-green),
    var(--avatel-orange),
    var(--avatel-blue),
    transparent
  );
  opacity:.45;
}

.map-watermark{
  position:absolute;
  z-index:3;
  left:50%;
  top:53%;
  width:min(250px,22vw);
  transform:translate(-50%,-50%);
  opacity:.027;
  pointer-events:none;
  user-select:none;
  filter:grayscale(.1);
}

.avatel-map-head{
  min-width:395px;
}

.map-brand-tag{
  align-self:stretch;
  display:flex;
  align-items:center;
  gap:8px;
  padding:0 11px 0 0;
  border-right:1px solid rgba(255,255,255,.075);
  color:#dce4e9;
  font-size:8px;
  font-weight:900;
  letter-spacing:.13em;
  white-space:nowrap;
}

.map-brand-tag img{
  width:23px;
  height:auto;
  filter:drop-shadow(0 0 7px rgba(17,133,204,.18));
}

.map-brand-tag span{
  background:linear-gradient(90deg,var(--avatel-green),var(--avatel-orange),var(--avatel-blue));
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.map-head .live-badge span{
  background:var(--avatel-orange);
  box-shadow:0 0 12px rgba(235,135,19,.85);
}

.connection i,
.pulse-dot,
.server-chip i{
  background:var(--avatel-blue);
  box-shadow:0 0 10px rgba(17,133,204,.70);
}

.map-panel:after{
  content:"";
  position:absolute;
  z-index:7;
  pointer-events:none;
  left:0;
  right:0;
  top:0;
  height:2px;
  background:linear-gradient(
    90deg,
    var(--avatel-green) 0 10%,
    var(--avatel-orange) 10% 20%,
    var(--avatel-blue) 20% 30%,
    transparent 52%
  );
  opacity:.20;
}

.detail-brand{
  display:flex;
  align-items:center;
  gap:7px;
  margin:-2px 36px 8px 0;
  color:#8d9aa4;
  font-size:8px;
  font-weight:900;
  letter-spacing:.15em;
}

.detail-brand img{
  width:21px;
  height:auto;
}

.detail-panel:before{
  width:3px;
  background:linear-gradient(
    to bottom,
    var(--avatel-green),
    var(--avatel-orange) 48%,
    var(--avatel-blue),
    transparent 95%
  );
}

.detail-kicker:before{
  content:"";
}

.bottom-bar:before{
  content:"";
  position:absolute;
  left:22px;
  top:-1px;
  width:180px;
  height:1px;
  background:linear-gradient(
    90deg,
    var(--avatel-green),
    var(--avatel-orange),
    var(--avatel-blue),
    transparent
  );
  opacity:.38;
}

.server-chip{
  position:relative;
  overflow:hidden;
}

.server-chip:after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:1px;
  background:linear-gradient(90deg,var(--avatel-blue),transparent 72%);
  opacity:.18;
}

@media(max-width:620px){
  .official-mark{
    width:39px;
    height:39px;
    flex-basis:39px;
  }

  .official-triangle{width:28px}
  .official-wordmark{width:118px}
  .brand-copy .eyebrow{display:none}
  .avatel-map-head{min-width:0}
  .map-brand-tag{display:none}
  .map-watermark{width:34vw}
}


/* ONE-LOGO AVATEL HEADER */
.brand{
  gap:0;
}

.brand-copy{
  display:grid;
  grid-template-columns:auto;
  align-items:center;
}

.official-wordmark{
  width:165px;
  margin-bottom:4px;
}

.map-brand-tag{
  padding-left:1px;
}

.map-brand-tag img,
.detail-brand img,
.map-watermark,
.official-mark{
  display:none!important;
}

.detail-brand{
  margin-top:0;
}

@media(max-width:620px){
  .official-wordmark{width:126px}
}


/* CONTINENT LABELS */
.continent-labels{
  pointer-events:none;
  user-select:none;
}

.continent-labels text{
  fill:#687681;
  stroke:rgba(0,0,0,.55);
  stroke-width:2px;
  paint-order:stroke fill;
  text-anchor:middle;
  dominant-baseline:middle;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:18px;
  font-weight:850;
  letter-spacing:.055em;
  opacity:.72;
  filter:drop-shadow(0 2px 5px rgba(0,0,0,.7));
}

@media(max-width:900px){
  .continent-labels text{
    font-size:16px;
    opacity:.68;
  }
}

@media(max-width:620px){
  .continent-labels text{
    font-size:14px;
    letter-spacing:.035em;
    opacity:.62;
  }
}


/* =========================================================
   CLICKABLE ATTACK ARCS
   ========================================================= */

/*
  The SVG overlay stays transparent to normal map interaction.
  Only the invisible wide hit paths receive pointer input.
*/
.attack-overlay{
  pointer-events:none;
}

.attack-arc-group{
  pointer-events:none;
  outline:none;
}

.attack-hit-path{
  pointer-events:stroke;
  cursor:pointer;
}

.attack-arc-group .attack-arc{
  transition:
    stroke-width .14s ease,
    opacity .14s ease,
    filter .14s ease;
}

.attack-arc-group:hover .attack-arc,
.attack-arc-group:focus .attack-arc{
  stroke-width:3.1;
  opacity:1;
  filter:url(#bigGlow);
}

.attack-arc-group.selected .attack-arc{
  stroke-width:3.5;
  opacity:1;
  filter:url(#bigGlow);
}

.attack-arc-group.selected .source-core{
  filter:url(#bigGlow);
}

.attack-arc-group.selected .impact-ring{
  stroke-width:2;
}

/* Tiny visual hint without cluttering the map. */
.map-panel .map-head:after{
  content:"CLICK ARC FOR DETAILS";
  margin-left:auto;
  padding-left:11px;
  color:#52616c;
  font:7px ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.08em;
  white-space:nowrap;
}

@media(max-width:700px){
  .map-panel .map-head:after{
    display:none;
  }
}


/* =========================================================
   RADAR HISTORY MODE
   Fresh attacks animate, then settle into subtle history lines.
   ========================================================= */

.attack-arc-group{
  transition:opacity .8s ease;
}

.attack-arc-group.history{
  opacity:.30;
}

.attack-arc-group.history .attack-arc{
  stroke-width:1.05;
  stroke-dasharray:none;
  animation:none;
  filter:none;
  opacity:.9;
}

.attack-arc-group.history > path:not(.attack-hit-path):not(.attack-arc){
  opacity:.15;
  filter:none;
}

.attack-arc-group.history .source-core{
  opacity:.55;
  filter:none;
}

.attack-arc-group.history:hover,
.attack-arc-group.history:focus,
.attack-arc-group.history.selected{
  opacity:1;
}

.attack-arc-group.history:hover .attack-arc,
.attack-arc-group.history:focus .attack-arc,
.attack-arc-group.history.selected .attack-arc{
  stroke-width:3;
  filter:url(#bigGlow);
  opacity:1;
}

.attack-arc-group.history.selected .source-core{
  opacity:1;
  filter:url(#bigGlow);
}