.vfimvu-service-card {
  border-color: rgba(116, 92, 255, .48);
  background: linear-gradient(155deg, rgba(31, 31, 75, .98), rgba(7, 19, 34, .98));
}

.vfimvu-shield-icon {
  border-color: rgba(145, 125, 255, .7);
  background: linear-gradient(145deg, rgba(108, 82, 255, .28), rgba(50, 215, 255, .08));
  color: #bfb2ff;
}

.vfimvu-hub {
  position: relative;
  overflow: hidden;
  margin: 28px 0;
  padding: 30px;
  border: 1px solid rgba(118, 104, 255, .42);
  border-radius: 24px;
  background:
    radial-gradient(circle at 12% 0%, rgba(105, 82, 255, .18), transparent 38%),
    radial-gradient(circle at 100% 30%, rgba(50, 215, 255, .10), transparent 34%),
    #071321;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .28);
}

.vfimvu-hub::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 30px 30px;
  content: '';
}

.vfimvu-hub > * { position: relative; }
.vfimvu-hero { max-width: 840px; }
.vfimvu-hero > span { color: #9e8fff; font-size: 12px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.vfimvu-hero h2 { margin: 8px 0 10px; color: #fff; font-size: clamp(27px, 4vw, 42px); }
.vfimvu-hero p { margin: 0; color: #aebed0; font-size: 16px; line-height: 1.8; }

.vfimvu-benefits,
.vfimvu-workflows {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 24px;
}

.vfimvu-benefits article {
  padding: 17px;
  border: 1px solid rgba(139, 126, 255, .22);
  border-radius: 16px;
  background: rgba(9, 24, 40, .82);
}

.vfimvu-benefits b { display: inline-grid; width: 31px; height: 31px; margin-bottom: 12px; place-items: center; border-radius: 9px; background: rgba(116, 92, 255, .16); color: #a999ff; font-size: 11px; }
.vfimvu-benefits strong { display: block; color: #fff; font-size: 15px; }
.vfimvu-benefits p { margin: 7px 0 0; color: #8fa3b8; font-size: 12px; line-height: 1.7; }

.vfimvu-workflows { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.vfimvu-login { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 24px; padding: 20px; border: 1px solid #29445e; border-radius: 16px; background: rgba(5, 17, 30, .92); }
.vfimvu-login p { margin: 0; color: #9fb1c4; }
.vfimvu-login .vfcal3d-button { flex: 0 0 auto; text-align: center; }
.vfimvu-panel { display: flex; min-width: 0; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid #20364e; border-radius: 19px; background: rgba(5, 17, 30, .92); }
.vfimvu-panel-heading > span { color: #58ddff; font-size: 10px; font-weight: 900; letter-spacing: .14em; }
.vfimvu-panel-heading h3 { margin: 7px 0; color: #fff; font-size: 21px; }
.vfimvu-panel-heading p { min-height: 54px; margin: 0; color: #8fa3b8; font-size: 13px; line-height: 1.7; }
.vfimvu-panel > label:not(.vfimvu-check) { display: grid; gap: 7px; color: #cdd9e7; font-size: 12px; font-weight: 800; }
.vfimvu-panel input[type="text"] { width: 100%; min-height: 46px; box-sizing: border-box; padding: 10px 12px; border: 1px solid #29445e; border-radius: 11px; outline: 0; background: #081828; color: #fff; font: inherit; direction: ltr; text-align: left; }
.vfimvu-panel input[type="text"]:focus { border-color: #7668ff; box-shadow: 0 0 0 3px rgba(118, 104, 255, .16); }
.vfimvu-check { display: flex; align-items: flex-start; gap: 9px; color: #9fb1c4; font-size: 12px; line-height: 1.55; }
.vfimvu-check input { width: 17px; height: 17px; margin-top: 1px; accent-color: #7668ff; }
.vfimvu-panel .vfcal3d-button { width: 100%; margin-top: auto; text-align: center; }
.vfimvu-panel > small { color: #6f849a; font-size: 11px; text-align: center; }

.vfimvu-status { margin-top: 18px; padding: 13px 15px; border: 1px solid #29445e; border-radius: 12px; background: rgba(50, 215, 255, .06); color: #cfeffc; }
.vfimvu-status.is-success { border-color: rgba(62, 218, 150, .4); background: rgba(62, 218, 150, .08); color: #9ff1c9; }
.vfimvu-status.is-error { border-color: rgba(255, 95, 114, .45); background: rgba(255, 95, 114, .08); color: #ffb0ba; }
.vfimvu-output { margin-top: 18px; }
.vfimvu-result-card { padding: 22px; border: 1px solid #28435d; border-radius: 18px; background: rgba(4, 15, 27, .96); }
.vfimvu-result-card.is-verified { border-color: rgba(62, 218, 150, .38); }
.vfimvu-result-head,
.vfimvu-product-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.vfimvu-verified { color: #6ce2aa; font-weight: 900; }
.vfimvu-result-head code { color: #8097ad; font-size: 11px; }
.vfimvu-result-stats,
.vfimvu-scoreboard { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 18px 0; }
.vfimvu-result-stats > div,
.vfimvu-scoreboard > div { min-width: 0; padding: 14px; border: 1px solid #20364e; border-radius: 13px; background: #071725; }
.vfimvu-result-stats span,
.vfimvu-scoreboard span { display: block; color: #879cb1; font-size: 11px; }
.vfimvu-result-stats strong,
.vfimvu-scoreboard strong { display: block; margin-top: 5px; color: #fff; font-size: 24px; }
.vfimvu-scoreboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.vfimvu-scoreboard small { display: block; margin-top: 5px; color: #647b91; font-size: 9px; }
.vfimvu-scoreboard .is-legal strong { color: #6ce2aa; }
.vfimvu-scoreboard .is-suspect strong { color: #ffca70; }
.vfimvu-hash { display: grid; gap: 5px; margin: 0 0 16px; }
.vfimvu-hash span { color: #71889e; font-size: 10px; }
.vfimvu-hash code { overflow-wrap: anywhere; color: #aebed0; font-size: 11px; }
.vfimvu-certificate-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.vfimvu-certificate-actions .vfcal3d-button { flex: 1 1 220px; text-align: center; }
.vfimvu-product-head span { color: #58ddff; font-size: 11px; font-weight: 900; }
.vfimvu-product-head h3 { margin: 6px 0; color: #fff; font-size: 21px; }
.vfimvu-product-head p { margin: 0; color: #879cb1; font-size: 12px; }
.vfimvu-product-head a { flex: 0 0 auto; color: #72e1ff; text-decoration: none; }
.vfimvu-chain,
.vfimvu-asset-summary { margin-top: 15px; padding-top: 15px; border-top: 1px solid #172c40; }
.vfimvu-chain > strong,
.vfimvu-asset-summary > strong { color: #dbe8f5; font-size: 12px; }
.vfimvu-chain > div,
.vfimvu-asset-summary > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.vfimvu-chain span { padding: 6px 9px; border: 1px solid #29445e; border-radius: 8px; color: #9eb3c8; font: 11px monospace; }
.vfimvu-chain span.is-current { border-color: #7668ff; color: #c4baff; }
.vfimvu-chain i { align-self: center; color: #4f657b; font-style: normal; }
.vfimvu-asset-summary span { display: flex; gap: 12px; padding: 8px 10px; border-radius: 9px; background: #0b1c2c; color: #8197ad; font-size: 11px; }
.vfimvu-asset-summary b { color: #fff; }
.vfimvu-warning,
.vfimvu-coverage,
.vfimvu-legal-inline { margin: 14px 0 0; padding: 12px 14px; border-radius: 10px; background: rgba(255, 192, 91, .07); color: #c7b28e; font-size: 11px; line-height: 1.7; }
.vfimvu-coverage { background: rgba(50, 215, 255, .06); color: #8faec0; }
.vfimvu-legal-inline { background: transparent; color: #6e8296; }
.vfimvu-legal { margin: 17px 0 0; color: #64798e; font-size: 10px; line-height: 1.7; }

@media (max-width: 850px) {
  .vfimvu-hub { padding: 22px; }
  .vfimvu-benefits,
  .vfimvu-workflows { grid-template-columns: 1fr; }
  .vfimvu-panel-heading p { min-height: 0; }
  .vfimvu-result-stats { grid-template-columns: repeat(2, 1fr); }
  .vfimvu-login { align-items: stretch; flex-direction: column; }
}

@media (max-width: 520px) {
  .vfimvu-hub { margin-inline: -4px; padding: 17px; border-radius: 18px; }
  .vfimvu-scoreboard { grid-template-columns: 1fr; }
  .vfimvu-product-head,
  .vfimvu-result-head { flex-direction: column; }
}
