.debug-hole-card{--phosphor-green:#39ff14;--phosphor-dim:#1a8f0a;--phosphor-glow:#39ff1499;--crt-black:#0a0a0a;--crt-dark:#111;--scanline:#00000026;--amber-accent:#ffb000;--card-width:88px;--card-height:127px;perspective:1000px;display:inline-block;position:relative}.debug-hole-card.has-debug{cursor:pointer}@media (hover:hover){.debug-hole-card.has-debug:hover .debug-card-inner:not(.flipped){filter:brightness(1.1);transform:translateY(-2px)}}.debug-card-inner{width:var(--card-width);height:var(--card-height);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.4,0,.2,1.4);position:relative}.debug-card-inner.flipped{transform:rotateY(180deg)}.debug-card-front,.debug-card-back{backface-visibility:hidden;border-radius:3px;width:100%;height:100%;position:absolute;box-shadow:0 2px 8px #0000004d}.debug-card-front{background:linear-gradient(45deg,#1976d2,#1565c0);border:2px solid #0d47a1;justify-content:center;align-items:center;display:flex}.debug-card-front .card-back-pattern:before{content:"🂠";color:#fff;opacity:.8;font-size:5em;line-height:.8}.debug-card-back{background:var(--crt-black);border:1px solid var(--phosphor-dim);overflow:hidden;transform:rotateY(180deg)}.crt-screen{box-sizing:border-box;border-radius:2px;flex-direction:column;width:100%;height:100%;padding:4px;font-family:IBM Plex Mono,JetBrains Mono Variable,Fira Code,monospace;display:flex;position:relative;box-shadow:inset 0 0 20px #39ff141a}.scanlines{background:repeating-linear-gradient(0deg, var(--scanline) 0px, var(--scanline) 1px, transparent 1px, transparent 2px);pointer-events:none;z-index:10;opacity:.7;position:absolute;inset:0}.debug-header{border-bottom:1px solid var(--phosphor-dim);justify-content:center;align-items:center;gap:3px;margin-bottom:3px;padding:2px 0 3px;display:flex}.block-char{color:var(--phosphor-green);text-shadow:0 0 2px var(--phosphor-glow), 0 0 4px var(--phosphor-glow);font-size:8px}.block-char:before{content:"▓"}.header-text{color:var(--phosphor-green);letter-spacing:.5px;text-shadow:0 0 2px var(--phosphor-glow), 0 0 4px var(--phosphor-glow), 0 0 8px #39ff144d;font-size:8px;font-weight:600}.debug-stats{flex-direction:column;flex:1;justify-content:space-between;gap:1px;display:flex}.stat-row{justify-content:space-between;align-items:center;padding:1px 2px;animation:.3s ease-out both stat-reveal;display:flex}@keyframes stat-reveal{0%{opacity:0;transform:translate(-4px)}to{opacity:1;transform:translate(0)}}.stat-label{color:var(--phosphor-dim);letter-spacing:.3px;flex-shrink:0;width:28px;font-size:6px;font-weight:500}.stat-value{color:var(--phosphor-green);text-shadow:0 0 2px var(--phosphor-glow), 0 0 4px var(--phosphor-glow);text-align:right;text-overflow:ellipsis;white-space:nowrap;flex:1;font-size:7px;font-weight:400;overflow:hidden}.stat-latency{color:#0ff;text-shadow:0 0 2px #0ff9,0 0 4px #0ff6}.stat-cost{color:var(--phosphor-green)}.stat-cost.high-cost{color:var(--amber-accent);text-shadow:0 0 2px #ffb00099,0 0 4px #ffb00066}.stat-divider{background:linear-gradient(90deg, transparent 0%, var(--phosphor-dim) 20%, var(--phosphor-dim) 80%, transparent 100%);height:1px;margin:2px 0}.stat-footer{flex-direction:column;align-items:center;gap:2px;padding-top:2px;animation:.3s ease-out both stat-reveal;display:flex}.progress-bar{gap:1px;height:6px;display:flex}.progress-block{background:var(--phosphor-green);opacity:.7;width:4px;height:100%;box-shadow:0 0 2px var(--phosphor-glow)}.progress-block:nth-child(odd){opacity:.9}.call-count{color:var(--phosphor-dim);letter-spacing:.2px;font-size:7px}.debug-stats.no-data{justify-content:center;align-items:center}.no-data-text{color:var(--phosphor-dim);opacity:.6;font-size:9px;animation:1.5s infinite blink}@keyframes blink{0%,to{opacity:.6}50%{opacity:.3}}.debug-backdrop{display:none}.debug-card-inner.flipped .crt-screen{animation:.4s ease-out boot-flicker}@keyframes boot-flicker{0%,10%{opacity:0}15%,20%{opacity:1}25%{opacity:.3}30%,to{opacity:1}}@media (width<=768px){.debug-hole-card{--card-width:min(17vw, 80px);--card-height:auto}.debug-card-inner{width:var(--card-width);aspect-ratio:500/726;height:auto}.debug-backdrop{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);z-index:999;background:#000000bf;animation:.2s ease-out fade-in;display:block;position:fixed;inset:0}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.debug-hole-card.active{z-index:1000}.debug-hole-card.active .debug-card-inner{width:140px;height:200px;aspect-ratio:unset;transition:all .4s cubic-bezier(.4,0,.2,1.4);position:fixed;top:50%;left:50%;transform:translate(-50%,-50%)rotateY(180deg)}.debug-hole-card.active .header-text,.debug-hole-card.active .block-char{font-size:10px}.debug-hole-card.active .stat-label{width:36px;font-size:8px}.debug-hole-card.active .stat-value,.debug-hole-card.active .call-count{font-size:9px}.debug-hole-card.active .progress-block{width:6px;height:8px}.debug-hole-card.active .crt-screen{padding:8px}.debug-hole-card.active .debug-header{margin-bottom:6px;padding:4px 0 6px}.debug-hole-card.active .stat-row{padding:2px 4px}.debug-hole-card.active .stat-divider{margin:4px 0}.debug-hole-card.active .stat-footer{gap:4px;padding-top:4px}}@media (hover:none){.debug-hole-card.has-debug:active .debug-card-inner:not(.flipped){transform:scale(.98)}}
