#vision-status {
  --accent:#FF8A00;
  --edge:rgba(255,255,255,0.08);
  --text:#E9EEF5;
  --muted:#A1ADBD;
  --card:rgba(255,255,255,0.03);
  position:relative;
  border:1px solid var(--edge);
  border-radius:22px;
  padding:clamp(18px,2.6vw,28px);
  margin-block:clamp(28px,5vw,64px);
  background:linear-gradient(180deg,rgba(255,255,255,0.15),rgba(0,0,0,0.16));
  box-shadow:0 18px 45px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.04);
  overflow:hidden;
  isolation:isolate;
}
#vision-status .x-scan {
  position:absolute;
  inset:-40% -20% auto -20%;
  height:70%;
  pointer-events:none;
  mix-blend-mode:screen;
  background:
    radial-gradient(40% 35% at 20% 0%,rgba(255,138,0,0.25),transparent 60%),
    radial-gradient(40% 35% at 80% 0%,rgba(255,193,115,0.15),transparent 60%);
  filter:blur(30px);
  opacity:.35;
  animation:vs-pulse 7s ease-in-out infinite;
}
#vision-status .x-grid {
  position:absolute;
  inset:-2px;
  pointer-events:none;
  opacity:.18;
  background-image:
    radial-gradient(circle at 50% -10%,rgba(255,138,0,0.14),transparent 30%),
    linear-gradient(transparent 0 0),
    linear-gradient(rgba(255,255,255,0.04) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,0.04) 1px,transparent 1px);
  background-size:100% 100%,100% 100%,36px 36px,36px 36px;
}
@keyframes vs-pulse { 0%,100%{opacity:.25} 50%{opacity:.45} }

#vision-status .x-status-head {
  display:flex;
  flex-wrap:wrap;
  gap:16px 22px;
  align-items:flex-end;
  justify-content:space-between;
  margin-bottom:clamp(14px,2vw,18px);
}
#vision-status .x-title {
  margin:0;
  font-weight:800;
  letter-spacing:.2px;
  color:var(--text);
  font-size:clamp(1.4rem,2.6vw,2rem);
}
#vision-status .x-em {
  color:var(--accent);
  text-shadow:0 0 18px rgba(255,138,0,0.35);
}
#vision-status .x-sub {
  color:var(--muted);
  margin:.25rem 0 0;
}
#vision-status .x-head-right {
  display:flex;
  gap:12px;
  align-items:flex-end;
  flex-wrap:wrap;
}
#vision-status .x-legend {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
#vision-status .x-tag {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 12px;
  border-radius:999px;
  color:#cfd7e6;
  background:var(--card);
  border:1px solid var(--edge);
  cursor:pointer;
  transition:border-color .2s,transform .12s;
}
#vision-status .x-tag .dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--c);
  box-shadow:0 0 12px var(--c);
}
#vision-status .x-tag:not(.is-on){opacity:.55;}
#vision-status .x-tag:active{transform:translateY(1px);}

#vision-status .x-tools {
  display:flex;
  gap:10px;
  align-items:center;
}
#vision-status .x-input {
  display:flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--edge);
  background:var(--card);
  color:#cdd6e4;
}
#vision-status .x-input input {
  background:transparent;
  border:0;
  color:inherit;
  outline:0;
  width:200px;
}
#vision-status .x-refresh {
  display:inline-flex;
  gap:8px;
  align-items:center;
  padding:9px 12px;
  border-radius:10px;
  color:#0f0f0f;
  background:linear-gradient(180deg,#FFC173,#FF8A00);
  border:1px solid rgba(255,138,0,0.35);
  box-shadow:0 10px 22px rgba(255,138,0,0.35), inset 0 1px 0 rgba(255,255,255,0.2);
}
#vision-status .x-group {
  position:relative;
  margin-top:18px;
}
#vision-status .x-group-head h2 {
  margin:0 0 10px;
  font-size:.95rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#A1ADBD;
}
#vision-status .x-cards {
  display:grid;
  grid-template-columns:repeat(12,1fr);
  gap:12px;
}
@media (max-width:1200px){#vision-status .x-cards{grid-template-columns:repeat(8,1fr);}}
@media (max-width:880px){#vision-status .x-cards{grid-template-columns:repeat(6,1fr);}}
@media (max-width:640px){#vision-status .x-cards{grid-template-columns:repeat(1,1fr);}}

#vision-status .x-card {
  --st:#9aa4b2;
  position:relative;
  z-index:0;
  grid-column:span 12;
  display:flex;
  flex-direction:column;
  gap:10px;
  text-decoration:none;
  cursor:pointer;
  padding:14px;
  border-radius:14px;
  color:var(--text);
  background:var(--card);
  border:1px solid var(--edge);
  overflow:hidden;
}
@media (min-width:641px){#vision-status .x-card{grid-column:span 6;}}
@media (min-width:881px){#vision-status .x-card{grid-column:span 4;}}

#vision-status .x-card-main {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}
#vision-status .x-name {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0;
}
#vision-status .x-label {
  font-weight:700;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#vision-status .x-subtle {
  color:var(--muted);
  font-size:.9rem;
}
#vision-status .x-pill {
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:8px 10px;
  border-radius:999px;
  border:1px solid color-mix(in srgb,var(--st) 45%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--st) 18%,transparent),rgba(0,0,0,0.15));
  color:#eaf2ff;
}
#vision-status .x-pill .dot {
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--st);
  box-shadow:0 0 14px var(--st);
}
#vision-status .x-pill .txt {
  font-weight:600;
  opacity:.95;
}
#vision-status .x-meta {
  display:flex;
  gap:10px;
  align-items:center;
  color:#c9d2e1;
  font-size:.92rem;
}
#vision-status .x-price {
  padding:6px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.35);
  border:1px solid var(--edge);
}
#vision-status .x-card .x-glow {
  position:absolute;
  inset:-30% -10%;
  background:radial-gradient(30% 30% at 70% 0%,color-mix(in srgb,var(--st) 25%,transparent),transparent 60%);
  filter:blur(28px);
  opacity:.25;
  pointer-events:none;
  transition:opacity .25s;
}
#vision-status .x-card .x-border {
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  opacity:.35;
  background:conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,0),color-mix(in srgb,var(--st) 60%,transparent),rgba(255,255,255,0) 45%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0) border-box;
  -webkit-mask-composite:xor;
  mask-composite:exclude;
  border:1px solid transparent;
  animation:vs-rotate 14s linear infinite;
}
@keyframes vs-rotate { to{transform:rotate(360deg);} }

#vision-status .x-card:hover .x-glow { opacity:.4; }
#vision-status .x-card:hover { transform:translateY(-1px); transition:transform .12s; }
#vision-status [data-group][style*="display: none"] { margin:0; padding:0; }