:root{--white: #ffffff;--glow: rgba(255, 255, 255, .4);--size-corners: 60px}.cyber-container{display:flex;justify-content:center;width:100%;height:100%}.cyber-card{position:relative;width:100%;height:100%;padding:10px;display:flex;flex-direction:column;color:var(--white);overflow:hidden;transition:all .3s ease;box-shadow:inset 0 2px 8px #ffffff1a}.cyber-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.cyber-svg.top-left{top:0;left:0;width:var(--size-corners);height:var(--size-corners)}.cyber-svg.top-right{top:0;right:0;left:auto;width:var(--size-corners);height:var(--size-corners)}.cyber-svg.bottom-left{bottom:0;left:0;top:auto;width:var(--size-corners);height:var(--size-corners)}.cyber-svg.bottom-right{bottom:0;right:0;top:auto;left:auto;width:var(--size-corners);height:var(--size-corners)}.cyber-svg.top-line{top:0;left:0;width:100%;height:var(--size-corners)}.cyber-svg.bottom-line{bottom:0;left:0;top:auto;width:100%;opacity:.8;height:var(--size-corners)}.main-path{fill:none;stroke:#ffffff26;stroke-width:1px}.bracket{opacity:.2;fill:none;stroke:var(--white);stroke-width:2px;filter:drop-shadow(0 0 1px var(--white))}.scanline{opacity:0}.cyber-card:hover .scanline{position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(to bottom,transparent,var(--white),transparent);opacity:.05;animation:scan 3s linear infinite}.status-dot{display:inline-block;width:6px;height:6px;background:var(--white);border-radius:50%;margin-right:8px;animation:pulse 1.5s infinite}.card-header{font-size:.7rem;letter-spacing:2px;margin-bottom:8px;display:flex;align-items:center;opacity:.4}.card-footer{font-size:.7rem;letter-spacing:1.5px;margin-top:8px;display:flex;justify-content:space-between;opacity:.4}.blink-text{font-size:.5rem;opacity:0}.cyber-card:hover{box-shadow:inset 0 2px 10px #ffffff1a}.cyber-card:hover .blink-text{font-size:.5rem;opacity:1;animation:blink 2s step-end infinite}.cyber-card:hover .bracket{stroke-width:3px;opacity:1;filter:drop-shadow(0 0 3px var(--white))}.cyber-card:hover .card-glossy-effect{position:relative;content:"";position:absolute;top:0;left:0;opacity:.4;transform:translate(20%);width:70%;height:20px;background:radial-gradient(ellipse at top,#ffffffe6,#ffffff1a 50%,#fff0 90%);pointer-events:none}@keyframes scan{0%{transform:translateY(-100px)}to{transform:translateY(400px)}}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(1.2)}}@keyframes blink{50%{opacity:0}}