.scan-badge {
  --forge: #e9bc75;
  position: relative;
  border: 1px solid color-mix(in srgb, var(--forge) 30%, transparent);
  border-radius: 20px;
  background: radial-gradient(ellipse at 8% 100%, #d99a3921, transparent 55%), linear-gradient(115deg, #e9bc750a, transparent 55%, #e9bc7507), var(--syn-bg, #0a0d13);
  color: var(--syn-text, #e4e9f0);
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px 0 #ffe7b80c, inset 0 -1px 0 #00000050, 0 10px 30px #00000018;
}
.scan-badge::before { content: ''; pointer-events: none; position: absolute; top: 0; left: 5%; right: 5%; height: 1px; background: linear-gradient(90deg, transparent, #ffe3a980, transparent); }
.scan-badge::after { content: ''; pointer-events: none; position: absolute; inset: 0; z-index: -1; opacity: .24; background-image: radial-gradient(var(--forge) .6px, transparent .6px); background-size: 12px 12px; mask-image: linear-gradient(90deg, #000, transparent 24%); }
.scan-badge__arrival { position: absolute; inset: 0; background: radial-gradient(ellipse at 10% 50%, #ffc26450, transparent 65%); pointer-events: none; opacity: 0; z-index: -1; }
.scan-badge__main { display: flex; align-items: center; gap: 26px; padding: 22px 28px; }
.scan-forge { flex: 0 0 100px; color: var(--forge); filter: drop-shadow(0 4px 10px #00000060); }
.scan-forge svg { display: block; width: 100%; overflow: visible; }
.scan-forge__plate { fill: url(#scan-forge-metal); stroke: #f5d59c20; stroke-width: .5; }
.scan-forge__ring { stroke: currentColor; opacity: .3; stroke-dasharray: .6 5.5; stroke-width: 1.6; }
.scan-forge__orbit-track { stroke: currentColor; stroke-width: .7; opacity: .16; }
.scan-forge__orbit { stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: var(--scan-orbit, 100); transform: rotate(-90deg); transform-origin: 50px 50px; transition: stroke-dashoffset 1.2s ease; filter: drop-shadow(0 0 3px #e9bc7560); }
.scan-forge__anvil { fill: #24242b; stroke: currentColor; stroke-width: 1.5; }
.scan-forge__chest { fill: #423526; stroke: currentColor; stroke-width: 1.7; }
.scan-forge__chest rect { fill: #f3d39b; stroke: none; }
.scan-forge__hammer { fill: url(#scan-forge-gold); stroke: #ffe1a3; stroke-width: 1; transform-origin: 74px 20px; }
.scan-forge__glow { fill: currentColor; opacity: .08; filter: blur(7px); }
.scan-forge__sparks { stroke: #ffe4a6; stroke-width: 2; }
.scan-forge__spark { opacity: 0; transform-origin: 50px 46px; }
.scan-badge__body { flex: 1; min-width: 0; }
.scan-badge__heading { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 16px; }
.scan-badge__eyebrow { display: block; color: var(--forge); font-size: 9px; font-weight: 750; letter-spacing: .23em; margin-bottom: 5px; }
.scan-badge h2 { margin: 0; font-size: 21px; font-weight: 650; line-height: 1.3; letter-spacing: -.035em; }
.scan-badge__signal { display: inline-flex; align-items: center; gap: 7px; color: var(--syn-text-muted, #8a96a8); font-size: 10px; font-weight: 650; white-space: nowrap; padding: 6px 10px; border: 1px solid currentColor; border-color: color-mix(in srgb, currentColor 22%, transparent); border-radius: 30px; background: color-mix(in srgb, currentColor 5%, transparent); }
.scan-badge__signal i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.scan-badge__signal svg { width: 24px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; display: none; }
.scan-badge__track { height: 8px; background: var(--syn-bar-track, #ffffff18); border-radius: 6px; overflow: hidden; position: relative; box-shadow: inset 0 1px 3px #00000040; }
.scan-badge__track::after { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(10% - 1px), #10121955 calc(10% - 1px), #10121955 10%); pointer-events: none; }
.scan-badge__fill { display: block; width: var(--scan-progress, 0%); height: 100%; border-radius: inherit; background: linear-gradient(90deg, #977040, var(--forge) 75%, #fff0cc); box-shadow: 0 0 12px #edb75c50, inset 0 1px 0 #fff5da66; transition: width 1.2s cubic-bezier(.2,.75,.25,1); position: relative; }
.scan-badge__fill::before { content: ''; position: absolute; right: 0; top: 1px; bottom: 1px; width: 3px; border-radius: 3px; background: #fff5df; box-shadow: 0 0 7px 2px #ffce78aa; }
.scan-badge__fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 20%, #ffffff90 50%, transparent 80%); opacity: 0; }
.scan-badge__caption { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 11px; color: var(--syn-text-muted, #8a96a8); font-variant-numeric: tabular-nums; }
#scan-badge-percent { color: var(--forge); font-weight: 650; white-space: nowrap; }
.scan-badge__estimate { border: 1px solid color-mix(in srgb, var(--forge) 12%, transparent); border-radius: 12px; background: linear-gradient(135deg, #e9bc7509, transparent); padding: 13px 18px; min-width: 165px; text-align: center; }
.scan-badge__estimate > span { display: block; font-size: 26px; font-weight: 650; letter-spacing: -.045em; line-height: 1.4; font-variant-numeric: tabular-nums; }
.scan-badge__estimate > small { display: block; margin-top: 3px; font-size: 10px; color: var(--syn-text-muted, #8a96a8); }
.scan-badge[data-state="active"] .scan-forge__hammer { animation: forge-strike 2.4s ease-in-out infinite; }
.scan-badge[data-state="active"] .scan-forge__glow { animation: forge-glow 2.4s ease-out infinite; }
.scan-badge[data-state="active"] .scan-forge__spark { animation: forge-spark 2.4s ease-out infinite; }
.scan-badge[data-state="active"] .scan-forge__spark--two { animation-delay: .04s; }
.scan-badge[data-state="active"] .scan-forge__spark--three { animation-delay: .08s; }
.scan-badge[data-state="active"] .scan-badge__signal { color: #79dcb0; }
.scan-badge[data-state="active"] .scan-badge__signal svg { display: block; }
.scan-badge[data-state="active"] .scan-badge__signal svg path { stroke-dasharray: 42; animation: forge-wave 3s linear infinite; }
.scan-badge[data-state="active"] .scan-badge__signal i { animation: forge-heartbeat 2.4s ease-out infinite; }
.scan-badge[data-state="active"] .scan-badge__fill::after { opacity: .65; animation: forge-sheen 3s ease-in-out infinite; }
.scan-badge[data-state="active"][data-indeterminate="true"] .scan-badge__fill { width: 32%; animation: forge-loading 2.6s ease-in-out infinite; }
.scan-badge[data-state="active"][data-indeterminate="true"] .scan-forge__orbit { stroke-dasharray: 14 86; stroke-dashoffset: 0; animation: forge-orbit 8s linear infinite; }
.scan-badge[data-state="paused"] { --forge: #c7ac7e; }
.scan-badge[data-state="queued"] { --forge: #88bccb; }
.scan-badge[data-state="offline"], .scan-badge[data-state="idle"] { --forge: #8a96a8; }
.scan-badge[data-state="failed"] { --forge: #ed9292; }
.scan-badge[data-state="complete"] { --forge: #79dcb0; }
.scan-badge:not([data-state="active"]) .scan-forge { opacity: .7; }
html:not(.dark) .scan-badge { --forge: #936326; }
html:not(.dark) .scan-badge[data-state="active"] .scan-badge__signal { color: #18754f; }
html:not(.dark) .scan-badge[data-state="complete"] { --forge: #18754f; }
html:not(.dark) .scan-badge[data-state="queued"] { --forge: #307c92; }
html:not(.dark) .scan-badge[data-state="failed"] { --forge: #b94343; }
html:not(.dark) .scan-badge[data-state="offline"], html:not(.dark) .scan-badge[data-state="idle"] { --forge: #647084; }
@keyframes forge-strike { 0%, 55%, 100% { transform: rotate(0); } 20%, 30% { transform: rotate(32deg); } 39% { transform: rotate(-8deg); } 45% { transform: rotate(4deg); } }
@keyframes forge-glow { 0%, 30%, 80%, 100% { opacity: .08; } 40% { opacity: .45; } }
@keyframes forge-spark { 0%, 36%, 65%, 100% { opacity: 0; transform: scale(.65); } 40% { opacity: 1; transform: scale(.9); } 60% { opacity: 0; transform: scale(1.5); } }
@keyframes forge-heartbeat { 0%, 100% { box-shadow: 0 0 0 0 #79dcb000; } 20% { box-shadow: 0 0 0 4px #79dcb022; } 65% { box-shadow: 0 0 0 7px #79dcb000; } }
@keyframes forge-sheen { from { transform: translateX(-110%); } to { transform: translateX(110%); } }
@keyframes forge-loading { 0%, 100% { transform: translateX(-105%); } 50% { transform: translateX(315%); } }
@keyframes forge-orbit { to { transform: rotate(270deg); } }
@keyframes forge-wave { 0%, 20% { stroke-dashoffset: 42; opacity: .4; } 65%, 100% { stroke-dashoffset: 0; opacity: 1; } }
@media (max-width: 600px) {
  .scan-badge__main { gap: 12px; padding: 16px; flex-wrap: wrap; }
  .scan-forge { flex-basis: 66px; }
  .scan-badge h2 { font-size: 16px; }
  .scan-badge__heading { gap: 8px; }
  .scan-badge__signal { padding: 5px 7px; gap: 5px; }
  .scan-badge[data-state="active"] .scan-badge__signal svg { display: none; }
  .scan-badge__estimate { width: 100%; min-width: 0; border: 0; border-top: 1px solid var(--syn-border, #ffffff18); border-radius: 0; background: none; padding: 12px 0 0 78px; text-align: left; display: flex; align-items: baseline; gap: 8px; }
  .scan-badge__estimate > span { font-size: 18px; }
}
@media (max-width: 380px) {
  .scan-forge { flex-basis: 52px; }
  .scan-badge__signal i { display: none; }
  .scan-badge__estimate { padding-left: 64px; }
  .scan-badge__caption { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-badge *, .scan-badge *::after, .scan-badge *::before { animation: none !important; transition: none !important; }
  .scan-badge[data-state="active"][data-indeterminate="true"] .scan-badge__fill { width: 100%; opacity: .25; }
}