.mega-vfd-visual { margin: 28px 0; padding: 28px; border: 1px solid #cfe0f2; border-radius: 18px; background: linear-gradient(135deg, #061b35, #0b3764); color: #eef7ff; box-shadow: 0 16px 34px rgba(9, 39, 75, .15); }
.mega-vfd-head { display: flex; justify-content: space-between; gap: 24px; align-items: flex-start; }
.mega-vfd-head h3 { margin: 8px 0 8px; font-size: clamp(21px, 3vw, 32px); line-height: 1.1; color: #fff; }
.mega-vfd-head p { margin: 0; max-width: 680px; color: #c9def1; line-height: 1.6; }
.mega-vfd-badge { padding: 7px 10px; border: 1px solid #4db8ff; border-radius: 999px; color: #86d5ff; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.mega-vfd-controls { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 22px 0; }
.mega-vfd-controls label { color: #c9def1; font-size: 13px; }
.mega-vfd-controls strong { float: right; color: #fff; font-size: 15px; }
.mega-vfd-controls input { width: 100%; margin-top: 10px; accent-color: #38bdf8; }
.mega-vfd-flow { display: grid; grid-template-columns: 1fr 76px 1.4fr 1fr; gap: 10px; align-items: center; min-height: 128px; padding: 16px; overflow: hidden; border: 1px solid rgba(129, 205, 255, .22); border-radius: 13px; background: rgba(1, 15, 32, .4); }
.mega-vfd-air { position: relative; height: 74px; display: flex; align-items: center; gap: 8px; color: #72d7ff; font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.mega-vfd-air i { width: 36px; height: 2px; background: #35c5ff; box-shadow: 0 0 10px #35c5ff; animation: mega-vfd-flow 1.4s linear infinite; }
.mega-vfd-air i:nth-child(2) { animation-delay: -.45s; opacity: .75; }
.mega-vfd-air i:nth-child(3) { animation-delay: -.9s; opacity: .5; }
.mega-vfd-out { transform: scaleX(-1); }
.mega-vfd-out span { transform: scaleX(-1); }
.mega-vfd-filter { height: 88px; display: flex; flex-direction: column; justify-content: center; gap: 9px; padding: 8px; border: 1px dashed #8ba5ba; background: repeating-linear-gradient(135deg, rgba(160, 182, 197, .15) 0 3px, transparent 3px 8px); color: #c9def1; text-align: center; font-size: 10px; }
.mega-vfd-filter b { height: 5px; width: 10%; border-radius: 999px; background: #fb923c; transition: width .2s; }
.mega-vfd-drive { position: relative; display: flex; align-items: center; justify-content: center; min-height: 88px; border: 1px solid #2f83b5; border-radius: 9px; background: linear-gradient(90deg, #123d61, #14567a); color: #dff6ff; font-size: 12px; letter-spacing: .08em; text-align: center; }
.mega-vfd-hotspot { position: absolute; right: 11%; width: 35px; height: 35px; border-radius: 50%; background: #ff4d3d; opacity: .25; filter: blur(8px); transition: opacity .2s; }
.mega-vfd-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.mega-vfd-metrics div { padding: 14px; border-radius: 10px; background: rgba(255, 255, 255, .08); }
.mega-vfd-metrics span, .mega-vfd-metrics small { display: block; color: #b7d0e3; font-size: 12px; }
.mega-vfd-metrics strong { display: block; margin: 5px 0; color: #fff; font-size: 22px; }
.mega-vfd-visual[data-risk="at-risk"] .mega-vfd-metrics strong { color: #ff9b7e; }
.mega-vfd-visual[data-risk="watch"] .mega-vfd-metrics strong { color: #ffd166; }
.mega-vfd-note { margin: 18px 0 0; color: #aac5da; font-size: 12px; line-height: 1.6; }
@keyframes mega-vfd-flow { from { transform: translateX(-10px); opacity: .25; } 50% { opacity: 1; } to { transform: translateX(12px); opacity: .25; } }
@media (max-width: 720px) { .mega-vfd-visual { padding: 20px; } .mega-vfd-head, .mega-vfd-controls, .mega-vfd-metrics { display: block; } .mega-vfd-badge { display: inline-block; margin-top: 14px; } .mega-vfd-controls label, .mega-vfd-metrics div { display: block; margin: 12px 0; } .mega-vfd-flow { grid-template-columns: 1fr; } .mega-vfd-air, .mega-vfd-out { display: none; } }