.vue-c-card[data-v-0e7914c7]{--card-width: 350px;--card-height: calc(var(--card-width) / 1.586);--card-padding: calc(var(--card-width) * .0875);--font-number: calc(var(--card-width) * .0525);--font-text: calc(var(--card-width) * .045);--font-small: calc(var(--card-width) * .04);--brand-height: calc(var(--card-width) * .125);perspective:800px}.vue-c-card .credit-card[data-v-0e7914c7],.vue-c-card .front[data-v-0e7914c7],.vue-c-card .back[data-v-0e7914c7]{width:var(--card-width);height:var(--card-height)}.vue-c-card .credit-card[data-v-0e7914c7]{background:#bdbdbd;color:#fff;border-radius:calc(var(--card-width) * .02);box-shadow:0 4px 12px #0000004d;text-shadow:1px 1px 0px rgba(0,0,0,.3);transition:transform .5s;position:relative;transform-style:preserve-3d;text-align:left}.vue-c-card .credit-card.flip-cc[data-v-0e7914c7]{transform:rotateY(180deg)}.vue-c-card .credit-card.visa-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#1a1f71,#2b4acb)}.vue-c-card .credit-card.mastercard-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#eb001b,#f79e1b)}.vue-c-card .credit-card.diners-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#004c97,#0078bf)}.vue-c-card .credit-card.amex-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#006fcf,#00a1e0)}.vue-c-card .credit-card.elo-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#000,#ffcb05)}.vue-c-card .credit-card.discover-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#ff6000,#ffb84d)}.vue-c-card .credit-card.aura-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#6b5b95,#918db9)}.vue-c-card .credit-card.hipercard-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#822124,#b5232a)}.vue-c-card .credit-card.jcb-cc[data-v-0e7914c7]{background:linear-gradient(135deg,#0b4ea2,#098a5b)}.vue-c-card .credit-card .front[data-v-0e7914c7],.vue-c-card .credit-card .back[data-v-0e7914c7]{backface-visibility:hidden;position:absolute;top:0;left:0}.vue-c-card .credit-card .front[data-v-0e7914c7]{z-index:2;transform:rotateY(0)}.vue-c-card .credit-card .back[data-v-0e7914c7]{transform:rotateY(-180deg)}.vue-c-card .credit-card .card-number[data-v-0e7914c7],.vue-c-card .credit-card .card-holder[data-v-0e7914c7],.vue-c-card .credit-card .card-exp[data-v-0e7914c7],.vue-c-card .credit-card .card-cvc[data-v-0e7914c7]{font-family:Courier New,monospace;position:absolute;font-weight:600;margin:0}.vue-c-card .credit-card .card-brand[data-v-0e7914c7]{position:absolute;top:var(--card-padding);right:var(--card-padding);height:var(--brand-height);width:auto}.vue-c-card .credit-card .card-number[data-v-0e7914c7]{font-size:var(--font-number);letter-spacing:calc(var(--card-width) * .008);top:45%;left:var(--card-padding);right:var(--card-padding);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vue-c-card .credit-card .card-holder[data-v-0e7914c7]{font-size:var(--font-text);letter-spacing:calc(var(--card-width) * .003);text-transform:uppercase;bottom:var(--card-padding);left:var(--card-padding);max-width:60%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.vue-c-card .credit-card .card-exp[data-v-0e7914c7]{font-size:var(--font-text);bottom:var(--card-padding);right:var(--card-padding)}.vue-c-card .credit-card .card-cvc[data-v-0e7914c7]{font-size:var(--font-number);top:45%;right:var(--card-padding);padding:calc(var(--card-width) * .02) calc(var(--card-width) * .03);background:#fff3;border-radius:calc(var(--card-width) * .01)}*{margin:0;padding:0;box-sizing:border-box}body{font-family:DM Sans,system-ui,sans-serif;background:linear-gradient(135deg,#1a1a2e,#16213e,#0f3460);min-height:100vh;color:#e8e8e8}.demo-page{max-width:520px;margin:0 auto;padding:48px 24px}header{text-align:center;margin-bottom:48px}header h1{font-size:2.5rem;font-weight:600;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}header .tagline{color:#a0a0a0;margin-top:8px;font-size:1.1rem}header .links{margin-top:16px;display:flex;gap:16px;justify-content:center}header .links a{color:#667eea;text-decoration:none;font-weight:500;padding:8px 16px;border:1px solid #667eea;border-radius:6px;transition:all .2s}header .links a:hover{background:#667eea;color:#fff}main{display:flex;flex-direction:column;gap:32px}.preview{display:flex;justify-content:center}.size-control{display:flex;flex-direction:column;align-items:center;gap:8px}.size-control label{font-size:.85rem;font-weight:500;color:#a0a0a0;text-transform:uppercase;letter-spacing:.5px}.size-control input[type=range]{width:100%;max-width:300px;height:6px;background:#2a2a4a;border-radius:3px;outline:none;cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none}.size-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;background:#667eea;border-radius:50%;cursor:pointer;transition:transform .2s}:is():hover{transform:scale(1.2)}.size-control input[type=range]::-moz-range-thumb{width:18px;height:18px;background:#667eea;border-radius:50%;border:none;cursor:pointer}.form{display:flex;flex-direction:column;gap:20px}.form .row{display:flex;gap:16px}.form .field{display:flex;flex-direction:column;gap:6px;flex:1}.form .field label{font-size:.85rem;font-weight:500;color:#a0a0a0;text-transform:uppercase;letter-spacing:.5px}.form .field input{padding:14px 16px;border:2px solid #2a2a4a;border-radius:8px;background:#1a1a2e;color:#fff;font-size:1rem;font-family:inherit;transition:border-color .2s}.form .field input:focus{outline:none;border-color:#667eea}.form .field input::placeholder{color:#555}.test-cards{margin-top:16px}.test-cards h3{font-size:.85rem;font-weight:500;color:#a0a0a0;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.test-cards .cards-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}.test-cards .cards-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px;background:#1a1a2e;border:1px solid #2a2a4a;border-radius:8px;cursor:pointer;transition:all .2s}.test-cards .cards-grid button:hover{border-color:#667eea;background:#1f1f3a}.test-cards .cards-grid button .brand{font-size:.75rem;font-weight:600;color:#667eea;text-transform:uppercase}.test-cards .cards-grid button .number{font-size:.8rem;color:#888;font-family:monospace}.docs{margin-top:32px;padding-top:32px;border-top:1px solid #2a2a4a}.docs h2{font-size:1.1rem;font-weight:600;color:#667eea;margin-bottom:12px;margin-top:24px}.docs h2:first-child{margin-top:0}.docs pre{background:#0d0d1a;border:1px solid #2a2a4a;border-radius:8px;padding:16px;overflow-x:auto}.docs pre code{font-family:JetBrains Mono,Fira Code,monospace;font-size:.85rem;color:#a0d0ff;white-space:pre}.docs table{width:100%;border-collapse:collapse;font-size:.9rem}.docs table th,.docs table td{text-align:left;padding:10px 12px;border-bottom:1px solid #2a2a4a}.docs table th{color:#a0a0a0;font-weight:500;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px}.docs table td code{background:#0d0d1a;padding:2px 6px;border-radius:4px;font-family:monospace;font-size:.85rem;color:#a0d0ff}.docs .supported-cards{color:#a0a0a0;line-height:1.6}footer{margin-top:64px;text-align:center;color:#666;font-size:.9rem}footer a{color:#667eea;text-decoration:none}footer a:hover{text-decoration:underline}