:root {
    --bg: #050505;
    --card-visa: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    --card-mc: linear-gradient(135deg, #2d1b4e 0%, #160d27 100%);
    --card-amex: linear-gradient(135deg, #1b3a4b 0%, #0d1d26 100%);
    --accent: #ffffff;
}

body {
    background-color: var(--bg); color: white; margin: 0;
    font-family: 'Plus Jakarta Sans', sans-serif; overflow: hidden;
}

/* Atmospheric Background Glow */
.glow-bg {
    position: fixed; width: 100vw; height: 100vh;
    background: radial-gradient(circle at 50% 50%, #1e1e2e 0%, #050505 100%);
    z-index: -1;
}

.app-wrapper {
    height: 100vh; display: flex; align-items: center; justify-content: center;
}

/* 3D Card Styling */
.card-container { perspective: 1000px; }
.virtual-card {
    width: 420px; height: 260px; border-radius: 24px; padding: 32px;
    background: var(--card-visa); position: relative;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 40px 80px rgba(0,0,0,0.6);
    overflow: hidden; transition: background 0.5s ease;
}

.noise {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: url('https://grainy-gradients.vercel.app/noise.svg');
    opacity: 0.05; pointer-events: none;
}

.card-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 50px; }
.chip-container { width: 50px; height: 38px; background: #d4d4d8; border-radius: 6px; position: relative; overflow: hidden; }
.chip-line { position: absolute; background: rgba(0,0,0,0.2); width: 100%; height: 1px; top: 33%; }
.chip-line:last-child { top: 66%; }

.card-number {
    font-family: 'JetBrains Mono', monospace; font-size: 1.6rem;
    letter-spacing: 4px; margin-bottom: 40px; text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.card-details { display: flex; gap: 30px; }
.detail-block label { display: block; font-size: 10px; opacity: 0.5; margin-bottom: 4px; letter-spacing: 1px; }
.detail-block span { font-size: 13px; font-weight: 500; font-family: 'JetBrains Mono'; }

/* UI Controls */
.controls-panel { margin-top: 50px; }
.btn-main {
    background: white; color: black; border: none; padding: 16px 32px;
    border-radius: 12px; font-weight: 700; cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
}
.btn-main:hover { transform: translateY(-2px); box-shadow: 0 10px 20px rgba(255,255,255,0.2); }

select {
    background: rgba(255,255,255,0.05); color: white; border: 1px solid rgba(255,255,255,0.1);
    padding: 16px; border-radius: 12px; margin-right: 15px; outline: none;
}