/*
 * VF_CRYPTO_SWITCH_DASHBOARD_STATUS_V31
 * Read-only dashboard Crypto Switch status card.
 */

.vf-cs-dash-status-v31{
  position:relative;
  width:100%;
  min-width:0;
  margin:0 0 18px;
  display:grid;
  grid-template-columns:minmax(0,1.45fr) minmax(300px,.55fr);
  gap:22px;
  padding:20px 22px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.95);
  border-radius:24px;
  background:
    linear-gradient(120deg,rgba(255,255,255,.96),rgba(249,249,255,.92)),
    linear-gradient(135deg,#eefaff,#fff3fc);
  box-shadow:0 18px 52px rgba(56,69,108,.09);
}

.vf-cs-dash-status-v31 *{
  box-sizing:border-box;
}

.vf-csd-glow{
  position:absolute;
  border-radius:50%;
  pointer-events:none;
}

.vf-csd-glow-a{
  width:240px;
  height:240px;
  right:-85px;
  top:-125px;
  background:radial-gradient(circle,rgba(113,87,245,.18),rgba(113,87,245,0) 70%);
}

.vf-csd-glow-b{
  width:220px;
  height:220px;
  left:38%;
  bottom:-165px;
  background:radial-gradient(circle,rgba(42,196,231,.14),rgba(42,196,231,0) 70%);
}

.vf-csd-primary,
.vf-csd-side{
  position:relative;
  z-index:2;
  min-width:0;
}

.vf-csd-brand{
  display:flex;
  align-items:center;
  gap:13px;
}

.vf-csd-icon{
  width:48px;
  height:48px;
  flex:0 0 48px;
  display:grid;
  place-items:center;
  border-radius:16px;
  color:#fff;
  background:linear-gradient(135deg,#36c8e9,#7258f5 58%,#d84dcb);
  box-shadow:0 10px 25px rgba(103,86,233,.22);
}

.vf-csd-icon svg{
  width:24px;
  height:24px;
}

.vf-csd-brand > div{
  min-width:0;
  flex:1;
}

.vf-csd-kicker{
  display:flex;
  align-items:center;
  gap:7px;
  color:#7260da;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:.15em;
}

.vf-csd-live-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#c3cad7;
  box-shadow:0 0 0 5px rgba(195,202,215,.15);
}

.vf-csd-live-dot.on{
  background:#22ba8a;
  box-shadow:0 0 0 5px rgba(34,186,138,.12),0 0 14px rgba(34,186,138,.45);
}

.vf-csd-title-row{
  margin-top:5px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:10px;
}

.vf-csd-title-row h2{
  margin:0;
  color:#121a31;
  font-size:19px;
  line-height:1.15;
  letter-spacing:-.025em;
}

.vf-csd-status-pill{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:4px 9px;
  border-radius:999px;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
}

.vf-csd-status-pill.loading{
  background:#f0f2f6;
  color:#778399;
}

.vf-csd-status-pill.inactive{
  background:#eef1f5;
  color:#6f7b91;
}

.vf-csd-status-pill.active{
  background:#dff8ee;
  color:#087e5b;
}

.vf-csd-status-pill.protected{
  background:#ece7ff;
  color:#5f4bd1;
}

.vf-csd-status-pill.working{
  background:#e2f5ff;
  color:#147ca3;
}

.vf-csd-status-pill.warning{
  background:#fff0df;
  color:#a76513;
}

.vf-csd-summary{
  margin:11px 0 13px;
  max-width:850px;
  color:#66738d;
  font-size:12px;
  line-height:1.55;
}

.vf-csd-sleeves{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
}

.vf-csd-sleeve{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding:10px 12px;
  border:1px solid rgba(32,44,75,.07);
  border-radius:14px;
  background:rgba(255,255,255,.72);
}

.vf-csd-sleeve.active{
  border-color:rgba(32,184,138,.16);
}

.vf-csd-sleeve.protected{
  border-color:rgba(112,86,239,.18);
  background:rgba(241,238,255,.72);
}

.vf-csd-sleeve.working{
  border-color:rgba(44,176,226,.19);
  background:rgba(235,249,255,.75);
}

.vf-csd-sleeve.warning{
  border-color:rgba(221,154,61,.22);
  background:rgba(255,247,234,.8);
}

.vf-csd-asset{
  width:34px;
  height:34px;
  flex:0 0 34px;
  display:grid;
  place-items:center;
  border-radius:11px;
  color:#fff;
  font-size:15px;
  font-weight:900;
}

.vf-csd-asset.btc{
  background:linear-gradient(145deg,#ffb23e,#ff8c18);
}

.vf-csd-asset.eth{
  background:linear-gradient(145deg,#7890ff,#5a62dc);
}

.vf-csd-sleeve-copy{
  min-width:0;
  flex:1;
}

.vf-csd-sleeve-copy > div{
  display:flex;
  align-items:baseline;
  flex-wrap:wrap;
  gap:7px;
}

.vf-csd-sleeve-copy strong{
  color:#17213b;
  font-size:11px;
}

.vf-csd-sleeve-copy span{
  color:#5f6c86;
  font-size:11px;
  font-weight:750;
}

.vf-csd-sleeve-copy small{
  display:block;
  margin-top:3px;
  color:#8993a7;
  font-size:9px;
  line-height:1.35;
}

.vf-csd-empty{
  grid-column:1/-1;
  padding:11px 12px;
  border-radius:13px;
  background:rgba(246,248,251,.88);
  color:#78849a;
  font-size:11px;
}

.vf-csd-empty a{
  margin-left:5px;
  color:#6552dd;
  font-weight:850;
  text-decoration:none;
}

.vf-csd-skeleton{
  height:56px;
  border-radius:14px;
  background:
    linear-gradient(90deg,#f1f3f7 25%,#f8f9fb 38%,#f1f3f7 58%);
  background-size:300% 100%;
  animation:vfCsdSkeleton 1.4s ease infinite;
}

@keyframes vfCsdSkeleton{
  0%{background-position:100% 0}
  100%{background-position:0 0}
}

.vf-csd-side{
  align-self:stretch;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:14px;
  padding-left:20px;
  border-left:1px solid rgba(38,49,78,.08);
}

.vf-csd-metrics{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.vf-csd-metrics > div{
  min-width:0;
  padding:10px;
  border-radius:13px;
  background:rgba(246,248,252,.78);
}

.vf-csd-metrics span{
  display:block;
  color:#8791a5;
  font-size:9px;
}

.vf-csd-metrics strong{
  display:block;
  margin-top:3px;
  overflow-wrap:anywhere;
  color:#18223d;
  font-size:12px;
}

.vf-csd-footer{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.vf-csd-footer > span{
  color:#939bad;
  font-size:9px;
}

.vf-csd-footer a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:36px;
  padding:0 13px;
  border-radius:12px;
  color:#fff;
  background:linear-gradient(90deg,#31c4e5,#7057ee,#d64fc7);
  box-shadow:0 9px 20px rgba(105,83,226,.15);
  font-size:10px;
  font-weight:900;
  text-decoration:none;
  white-space:nowrap;
}

@media(max-width:1200px){
  .vf-cs-dash-status-v31{
    grid-template-columns:minmax(0,1fr);
  }

  .vf-csd-side{
    padding-left:0;
    padding-top:13px;
    border-left:0;
    border-top:1px solid rgba(38,49,78,.08);
  }
}

@media(max-width:700px){
  .vf-cs-dash-status-v31{
    gap:14px;
    margin-bottom:14px;
    padding:16px;
    border-radius:20px;
  }

  .vf-csd-sleeves{
    grid-template-columns:minmax(0,1fr);
  }

  .vf-csd-metrics{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .vf-csd-footer{
    align-items:flex-start;
    flex-direction:column;
  }

  .vf-csd-footer a{
    width:100%;
    justify-content:center;
  }
}

@media(max-width:460px){
  .vf-csd-metrics{
    grid-template-columns:minmax(0,1fr);
  }

  .vf-csd-title-row{
    align-items:flex-start;
    flex-direction:column;
    gap:6px;
  }

  .vf-csd-brand{
    align-items:flex-start;
  }
}

@media(prefers-reduced-motion:reduce){
  .vf-csd-skeleton{
    animation:none !important;
  }
}