#status{
  position:relative;
  margin-top:10px;
  transition:all .22s ease;
}

#status:empty{ display:none; }

#status:not(:empty){
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:9px 10px;
  border-radius:8px;
  font-family:"Fira Code", ui-monospace, monospace;
  font-size:13px;
  font-weight:600;
  line-height:1.45;
  color:#f7f8fc !important;
  border:1px solid rgba(255,0,60,.20);
  background:linear-gradient(180deg, rgba(5,5,5,.98), rgba(1,1,1,1));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.015), 0 0 14px rgba(255,0,60,.03);
  overflow-wrap:anywhere;
}

#status:not(:empty)::before{
  content:""; flex:0 0 11px; width:11px; height:11px; margin-top:.42em; border-radius:50%;
  background:radial-gradient(circle at 30% 30%, #ffd7df 0%, #ff3155 44%, #7d051d 100%);
  box-shadow:0 0 0 4px rgba(255,49,85,.08), 0 0 12px rgba(255,49,85,.16);
}

#status.ok:not(:empty)::before{
  background:radial-gradient(circle at 30% 30%, #eafff1 0%, #39d98a 42%, #0b6b3c 100%);
  box-shadow:0 0 0 4px rgba(57,217,138,.10), 0 0 12px rgba(57,217,138,.18);
}

#status.err:not(:empty){
  color:#ffdbe2 !important;
  border-color:rgba(255,69,96,.28);
}

.brand .dot{
  transition:background .22s ease, box-shadow .22s ease;
  background:radial-gradient(circle at 30% 30%, #ffd6df 0%, #ff4d78 45%, #7a0f2c 100%);
  box-shadow:0 0 0 4px rgba(255,77,120,.10), 0 0 12px rgba(255,77,120,.18);
}

.brand .dot.ok{
  background:radial-gradient(circle at 30% 30%, #e9fff1 0%, #39d98a 42%, #0b6b3c 100%);
  box-shadow:0 0 0 4px rgba(57,217,138,.10), 0 0 12px rgba(57,217,138,.18);
}

@media (max-width: 640px){
  #status:not(:empty){
    padding:9px 10px;
    border-radius:8px;
    font-size:13px;
  }
}