*{box-sizing:border-box}body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif}.top-bar{display:flex;justify-content:flex-end;align-items:center;margin-bottom:clamp(.15rem,1vw,.5rem)}.vin-button,.sample-btn,.feature-badge,.footer-link,button{touch-action:manipulation;-webkit-tap-highlight-color:transparent}.vin-input{touch-action:manipulation}.vin-container{min-height:100vh;background:linear-gradient(135deg,#f0f4f8,#d9e2ec);display:flex;align-items:center;justify-content:center;padding:clamp(.3rem,2vw,1.5rem)}.vin-card{width:92%;max-width:100%;margin:0 auto;background:#ffffffd9;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-radius:clamp(1rem,3vw,2rem);box-shadow:0 25px 40px -12px #00000040;padding:clamp(.5rem,2vw,1.5rem);border:1px solid rgba(255,255,255,.6)}@media(min-width:768px){.vin-card{width:90%;max-width:700px}}@media(min-width:1024px){.vin-card{width:85%;max-width:900px}}@media(min-width:1440px){.vin-card{width:80%;max-width:1200px}}@media(min-width:1920px){.vin-card{width:75%;max-width:1600px}}@media(min-width:2560px){.vin-card{width:70%;max-width:1800px}}@media(max-width:480px){.vin-container{padding:.25rem}.vin-card{width:96%;padding:.5rem}}.vin-header{text-align:center;margin-bottom:clamp(.15rem,1vw,.5rem)}.vin-title{font-size:clamp(1.1rem,5vw,2.5rem);font-weight:500;font-family:Poppins,system-ui,sans-serif;display:flex;align-items:center;justify-content:center;gap:clamp(.2rem,1vw,.5rem);flex-wrap:wrap;margin:0 0 clamp(.15rem,1vw,.5rem) 0;line-height:1.2}.vin-title-text{background:linear-gradient(135deg,#1a2c3e,#2b6e3c);background-clip:text;-webkit-background-clip:text;color:transparent}.vin-version{background:#2b6e3c;color:#fff;font-size:clamp(.5rem,2vw,.75rem);padding:clamp(.1rem,.5vw,.2rem) clamp(.4rem,1.5vw,.7rem);border-radius:999px;font-family:monospace;display:inline-flex;align-items:center;line-height:1}.features-container{display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.2rem,1vw,.75rem);margin:clamp(.3rem,1.5vw,1rem) 0;padding:clamp(.25rem,1.5vw,.8rem) clamp(.3rem,2vw,1.5rem);background:#dcf0ff66;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:clamp(1.5rem,4vw,3rem);border:1px solid rgba(255,255,255,.5)}.feature-badge{display:inline-flex;align-items:center;gap:clamp(.1rem,.5vw,.3rem);padding:clamp(.1rem,.5vw,.35rem) clamp(.3rem,1.5vw,1rem);border-radius:clamp(1.5rem,4vw,2rem);font-size:clamp(.45rem,2vw,.9rem);font-weight:500;transition:transform .1s ease;box-shadow:0 1px 2px #0000000d}.feature-badge:hover{transform:translateY(-1px)}.feature-icon{font-size:clamp(.55rem,2.5vw,1.1rem)}.feature-text{line-height:1.2}.feature-green{background:#d1fae5;color:#065f46;border:1px solid #a7f3d0}.feature-purple{background:#ede9fe;color:#5b21b6;border:1px solid #ddd6fe}.feature-blue{background:#dbeafe;color:#1e40af;border:1px solid #bfdbfe}.feature-teal{background:#ccfbf1;color:#115e59;border:1px solid #99f6e4}.feature-orange{background:#ffedd5;color:#9a3412;border:1px solid #fed7aa}@media(max-width:480px){.features-container{gap:.2rem;padding:.2rem .3rem}.feature-badge{padding:.08rem .25rem}}.vin-input-group{display:flex;flex-wrap:wrap;gap:clamp(.25rem,1vw,.5rem);background:#fff;border-radius:clamp(1.5rem,4vw,3rem);padding:clamp(.1rem,.5vw,.25rem) clamp(.1rem,.5vw,.25rem) clamp(.1rem,.5vw,.25rem) clamp(.5rem,2vw,1.5rem);box-shadow:0 4px 12px #00000014;margin-bottom:clamp(.3rem,1.5vw,.75rem);width:100%}.input-wrapper{position:relative;flex:1;min-width:0}.vin-input{width:100%;border:none;padding:clamp(.4rem,2vw,.95rem) clamp(35px,8vw,80px) clamp(.4rem,2vw,.95rem) clamp(.5rem,2vw,1rem);font-size:clamp(.8rem,3vw,1.3rem);outline:none;background:transparent;font-family:monospace;text-transform:uppercase;letter-spacing:.5px}.vin-input::placeholder{font-family:system-ui;text-transform:none;color:#9aaebf;opacity:.5;font-size:clamp(.7rem,2.5vw,1rem)}.input-clear-btn{position:absolute;right:clamp(32px,7vw,70px);top:50%;transform:translateY(-50%);background:none;border:none;font-size:clamp(1rem,3vw,1.8rem);font-weight:300;color:#9aaebf;cursor:pointer;padding:0;width:clamp(16px,4vw,32px);height:clamp(16px,4vw,32px);display:flex;align-items:center;justify-content:center;border-radius:50%;transition:all .2s ease;z-index:2}.input-clear-btn:hover{color:#1a2c3e;background:#0000000d}.input-counter{position:absolute;right:clamp(5px,2vw,18px);top:50%;transform:translateY(-50%);display:flex;align-items:baseline;gap:.1rem;font-size:clamp(.55rem,2vw,.95rem);font-family:monospace;pointer-events:none;color:#9aaebf}.counter-number{font-weight:600;color:#4a627a}.counter-number.full{color:#2b6e3c;font-weight:700}.counter-sep,.counter-max{color:#cbd5e1}.vin-button{background:#fa3838e3;border:none;color:#fff;padding:clamp(.35rem,1.5vw,.9rem) clamp(.6rem,3vw,2.2rem);border-radius:clamp(1.5rem,4vw,3rem);font-size:clamp(.65rem,2.5vw,1.1rem);font-weight:500;cursor:pointer;transition:all .2s ease;white-space:nowrap;flex-shrink:0;min-width:clamp(55px,10vw,100px)}.vin-button:hover:not(:disabled){transform:scale(1.02)}.vin-button:active:not(:disabled){transform:scale(.98)}.vin-button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:1024px){.input-clear-btn{right:55px}.input-counter{right:4px}}@media(max-width:768px){.input-clear-btn{right:48px}.input-counter{right:4px}}@media(max-width:480px){.vin-input{padding-right:40px}.input-clear-btn{right:35px}.input-counter{right:4px}}.result-card{background:#ffffffb3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:clamp(.75rem,2.5vw,1.5rem);padding:clamp(.5rem,2vw,1.5rem);border:1px solid rgba(255,255,255,.7);min-height:clamp(150px,30vw,350px);display:flex;flex-direction:column;justify-content:center}.vin-highlight{background:#0f1f2c;color:#6fcf97;font-family:monospace;font-size:clamp(.7rem,2.5vw,1.4rem);padding:clamp(.4rem,1.5vw,1.2rem);border-radius:clamp(.5rem,2vw,1rem);text-align:center;letter-spacing:1px;word-break:break-all;margin-bottom:clamp(.4rem,1.5vw,1rem)}.info-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(140px,30vw,240px),1fr));gap:clamp(.3rem,1.5vw,1.5rem)}.info-card{background:#fff;padding:clamp(.3rem,1.5vw,.9rem) clamp(.4rem,2vw,1.2rem);border-radius:clamp(.5rem,2vw,1rem);box-shadow:0 1px 3px #0000000d}.info-card-red{border-left:clamp(2px,.5vw,4px) solid #ef4444}.info-card-orange{border-left:clamp(2px,.5vw,4px) solid #f97316}.info-card-yellow{border-left:clamp(2px,.5vw,4px) solid #eab308}.info-card-green{border-left:clamp(2px,.5vw,4px) solid #10b981}.info-card-cyan{border-left:clamp(2px,.5vw,4px) solid #06b6d4}.info-card-blue{border-left:clamp(2px,.5vw,4px) solid #3b82f6}.info-card-purple{border-left:clamp(2px,.5vw,4px) solid #8b5cf6}.info-card-pink{border-left:clamp(2px,.5vw,4px) solid #ec4899}.info-card-teal{border-left:clamp(2px,.5vw,4px) solid #14b8a6}.info-card-indigo{border-left:clamp(2px,.5vw,4px) solid #6366f1}.info-card-label{display:flex;align-items:center;gap:clamp(.1rem,.5vw,.3rem);font-size:clamp(.5rem,2vw,.75rem);text-transform:uppercase;color:#6c86a3;margin-bottom:clamp(.05rem,.5vw,.2rem)}.info-card-value{font-weight:600;font-size:clamp(.65rem,2.5vw,1.1rem);color:#1e2f3c;word-break:break-word}.loading-box{text-align:center;padding:clamp(1rem,5vw,3rem) 0}.spinner{display:inline-block;width:clamp(1.5rem,5vw,3rem);height:clamp(1.5rem,5vw,3rem);border:clamp(2px,.5vw,4px) solid #ccc;border-top-color:#1e6faf;border-radius:50%;animation:spin .8s linear infinite;margin-bottom:clamp(.3rem,2vw,1rem)}@keyframes spin{to{transform:rotate(360deg)}}.error-box{text-align:center;padding:clamp(.75rem,3vw,2rem);color:#c0392b}.error-icon{font-size:clamp(1.5rem,6vw,3.5rem);margin-bottom:clamp(.2rem,1vw,.5rem)}.empty-box{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:clamp(120px,30vw,250px);text-align:center}.empty-icon{font-size:clamp(1.8rem,8vw,5rem);opacity:.6;margin-bottom:clamp(.2rem,1.5vw,.75rem);animation:gentleFloat 3s ease-in-out infinite}@keyframes gentleFloat{0%,to{transform:translateY(0)}50%{transform:translateY(clamp(-3px,-.5vw,-6px))}}.empty-title{font-size:clamp(.7rem,3vw,1.3rem);font-weight:300;background:linear-gradient(135deg,#1a2c3e,#2b6e3c);background-clip:text;-webkit-background-clip:text;color:transparent;margin:clamp(.15rem,1vw,.5rem) 0}.empty-sub{font-size:clamp(.6rem,2.5vw,1.1rem);color:#fd9c0a;margin:0}.sample-button{text-align:center;margin-top:clamp(.4rem,2vw,1rem)}.sample-btn{display:inline-block;width:auto;max-width:90%;background:transparent;border:1px solid #afb1b3b4;padding:clamp(.2rem,1vw,.5rem) clamp(.5rem,2.5vw,1.5rem);border-radius:clamp(1.5rem,4vw,2rem);font-size:clamp(.55rem,2vw,.95rem);cursor:pointer;color:#2c577c;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sample-btn:hover:not(:disabled){background:#e3edf5;border-color:#8aaec9}@media(max-width:480px){.sample-btn{max-width:95%}}.footer-note{text-align:center;font-size:clamp(.45rem,2vw,.8rem);color:#7b8c9e;margin-top:clamp(.5rem,2vw,1.5rem);line-height:1.4}.copyright-line{font-size:clamp(.4rem,1.8vw,.75rem);color:#7b8c9e;margin:clamp(.15rem,1vw,.5rem) 0 0;display:flex;flex-wrap:wrap;justify-content:center;gap:clamp(.1rem,.5vw,.25rem)}.footer-link{color:#098728;text-decoration:none}.footer-link:hover{text-decoration:underline}.footer-separator{margin:0 clamp(.1rem,.5vw,.25rem);color:#cbd5e1}.faq-section{max-width:clamp(300px,90%,1000px);margin:clamp(.5rem,3vw,1.5rem) auto 0;padding:0 clamp(.5rem,2vw,1.5rem)}.faq-hidden{display:none}.faq-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(.4rem,1.5vw,.75rem)}.faq-section-title{font-size:clamp(.9rem,3.5vw,1.4rem);font-weight:500;color:#1a2c3e;margin:0}.faq-close-btn{background:none;border:none;font-size:clamp(1.1rem,4vw,1.8rem);cursor:pointer;color:#8a9eb3;padding:0;width:clamp(1.3rem,5vw,2rem);height:clamp(1.3rem,5vw,2rem);display:flex;align-items:center;justify-content:center;border-radius:50%}.faq-list{display:flex;flex-direction:column;gap:clamp(.25rem,1vw,.5rem)}.faq-item{background:#fff9;border-radius:clamp(.5rem,2vw,.75rem)}.faq-question{display:flex;justify-content:space-between;align-items:center;padding:clamp(.4rem,1.5vw,.9rem) clamp(.6rem,2vw,1.2rem);font-size:clamp(.7rem,2.5vw,1rem);font-weight:500;color:#1e2f3c;cursor:pointer}.faq-icon{font-size:clamp(1rem,3.5vw,1.4rem);color:#2b6e3c}.faq-answer{padding:0 clamp(.6rem,2vw,1.2rem) clamp(.5rem,2vw,1rem) clamp(.6rem,2vw,1.2rem);font-size:clamp(.65rem,2.5vw,.9rem);color:#4a627a;line-height:1.5;border-top:1px dashed rgba(0,0,0,.05)}.about-section{max-width:clamp(300px,90%,1000px);margin:clamp(.5rem,3vw,1.5rem) auto 0;padding:0 clamp(.5rem,2vw,1.5rem) clamp(1rem,4vw,2rem)}.about-hidden{display:none}.about-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:clamp(.4rem,1.5vw,.75rem)}.about-section-title{font-size:clamp(.9rem,3.5vw,1.4rem);font-weight:500;color:#1a2c3e;margin:0}.about-close-btn{background:none;border:none;font-size:clamp(1.1rem,4vw,1.8rem);cursor:pointer;color:#8a9eb3;padding:0;width:clamp(1.3rem,5vw,2rem);height:clamp(1.3rem,5vw,2rem);display:flex;align-items:center;justify-content:center;border-radius:50%}.about-content{font-size:clamp(.65rem,2.5vw,1rem);color:#4a627a;line-height:1.5}.about-content p{margin-bottom:clamp(.4rem,2vw,.75rem)}.about-content a{color:#2b6e3c;text-decoration:none}.privacy-container{min-height:100vh;background:linear-gradient(135deg,#f0f4f8,#d9e2ec);padding:clamp(.5rem,2vw,1.5rem);display:flex;align-items:center;justify-content:center}.privacy-card{width:100%;max-width:clamp(300px,90%,1000px);background:#fff;border-radius:clamp(.75rem,3vw,1.5rem);padding:clamp(.75rem,3vw,2rem);box-shadow:0 20px 35px -12px #0000001a}.privacy-card h1{color:#1a2c3e;font-size:clamp(1.1rem,4vw,1.8rem);margin-bottom:clamp(.25rem,1vw,.5rem)}.last-updated{color:#6c86a3;font-size:clamp(.65rem,2vw,.85rem);margin-bottom:clamp(.75rem,3vw,1.5rem);padding-bottom:clamp(.4rem,2vw,.75rem);border-bottom:1px solid #e2e8f0}.privacy-card h2{color:#2b6e3c;font-size:clamp(.9rem,3vw,1.3rem);margin-top:clamp(.75rem,3vw,1.5rem);margin-bottom:clamp(.3rem,1.5vw,.5rem)}.privacy-card p,.privacy-card li{color:#2c3e50;font-size:clamp(.7rem,2.5vw,1rem);line-height:1.5}.privacy-card ul{padding-left:clamp(1rem,3vw,1.5rem)}.back-link{text-align:center;margin-top:clamp(.75rem,3vw,1.5rem)}.back-link a{display:inline-block;padding:clamp(.3rem,1.5vw,.5rem) clamp(.6rem,2.5vw,1rem);background:#e2e8f0;border-radius:2rem;color:#1a2c3e;text-decoration:none;font-size:clamp(.7rem,2.5vw,.9rem)}hr{margin:clamp(1rem,3vw,1.5rem) 0;border:none;border-top:1px solid #e2e8f0}@media(max-width:480px){.privacy-container{padding:.4rem}.privacy-card{padding:.6rem}}
