*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background:linear-gradient(135deg,#0f0f1e,#1a1a2e,#16213e);min-height:100vh;color:#fff}#root{width:100%;min-height:100vh}.data-form-container{height:100%}.form-card{background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;padding:2rem;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d;height:100%}.form-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.1)}.header-icon{font-size:2rem;color:#667eea}.form-header h2{font-size:1.8rem;font-weight:700;margin:0}.form-group{margin-bottom:1.5rem}.form-group label{display:flex;align-items:center;gap:.5rem;font-size:.95rem;font-weight:500;margin-bottom:.5rem;color:#ffffffe6}.label-icon{font-size:1.1rem;color:#667eea}.form-select,.form-textarea{width:100%;padding:.875rem 1rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:12px;color:#fff;font-size:1rem;transition:all .3s ease;font-family:inherit}.form-select:focus,.form-textarea:focus{outline:none;border-color:#667eea;background:#ffffff1f;box-shadow:0 0 0 3px #667eea1a}.form-select option{background:#1a1a2e;color:#fff}.form-textarea{resize:vertical;min-height:100px}.char-count{display:block;text-align:right;font-size:.85rem;color:#ffffff80;margin-top:.25rem}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-color{width:100%;height:50px;padding:.25rem;background:#ffffff14;border:1px solid rgba(255,255,255,.15);border-radius:12px;cursor:pointer;transition:all .3s ease}.form-color:focus{outline:none;border-color:#667eea;box-shadow:0 0 0 3px #667eea1a}.info-box{margin-top:2rem;padding:1.25rem;background:linear-gradient(135deg,#667eea1a,#764ba21a);border-radius:12px;border:1px solid rgba(102,126,234,.2)}.info-box h4{font-size:1rem;margin-bottom:.75rem;color:#667eea}.info-box ul{list-style:none;padding:0;margin:0}.info-box li{font-size:.9rem;color:#ffffffb3;padding:.4rem 0 .4rem 1.5rem;position:relative}.info-box li:before{content:"→";position:absolute;left:0;color:#667eea}@media(max-width:768px){.form-card{padding:1.5rem}.form-row{grid-template-columns:1fr}}.preview-container{height:100%;display:flex;flex-direction:column}.device-selector{display:flex;gap:1rem;margin-bottom:2rem;padding:.5rem;background:#ffffff0d;border-radius:16px;border:1px solid rgba(255,255,255,.1)}.device-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem;background:transparent;border:none;border-radius:12px;color:#fff9;font-size:1rem;font-weight:500;cursor:pointer;transition:all .3s ease}.device-btn:hover{background:#ffffff14;color:#ffffffe6}.device-btn.active{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff}.device-icon{font-size:1.5rem}.preview-wrapper{flex:1;display:flex;justify-content:center;align-items:center;padding:2rem 0}.device-frame{width:100%;background:#ffffff0d;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:24px;border:1px solid rgba(255,255,255,.1);box-shadow:0 8px 32px #0000004d;overflow:hidden;position:relative;transition:all .5s cubic-bezier(.4,0,.2,1)}.device-frame.phone{max-width:375px;border-radius:36px;border:8px solid #1a1a2e}.device-frame.tablet{max-width:768px;border-radius:24px;border:6px solid #1a1a2e}.device-notch{position:absolute;top:0;left:50%;transform:translate(-50%);width:150px;height:25px;background:#1a1a2e;border-radius:0 0 20px 20px;z-index:10}.device-screen{background:linear-gradient(180deg,#fff,#f8f9fa);min-height:600px;padding:1rem}.screen-header{padding:1rem}.status-bar{display:flex;justify-content:space-between;align-items:center;color:#000;font-size:.875rem;font-weight:600}.status-icons{display:flex;gap:.5rem}.code-display{padding:2rem 1rem;display:flex;justify-content:center;align-items:center;min-height:500px}.code-wrapper{width:100%;max-width:400px;text-align:center}.qr-container,.barcode-container{background:#fff;padding:2rem;border-radius:16px;box-shadow:0 4px 16px #0000001a;margin-bottom:1.5rem;display:inline-block}.qr-code{display:block;max-width:100%;height:auto}.barcode-container svg{max-width:100%;height:auto}.code-info{background:#667eea1a;padding:1rem;border-radius:12px;border:1px solid rgba(102,126,234,.2)}.code-type-label{font-weight:700;font-size:1.1rem;color:#667eea;margin-bottom:.5rem}.encryption-badge{display:inline-block;background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;padding:.375rem .875rem;border-radius:20px;font-size:.85rem;font-weight:600;margin-bottom:.75rem}.data-preview{font-size:.9rem;color:#666;word-break:break-all;font-family:Courier New,monospace}.empty-state{padding:3rem 1rem}.empty-icon{font-size:4rem;margin-bottom:1rem;opacity:.5}.empty-state h3{font-size:1.5rem;color:#333;margin-bottom:.5rem}.empty-state p{color:#666;font-size:1rem}@media(max-width:768px){.device-selector{flex-direction:column}.device-btn span{display:none}.preview-wrapper{padding:1rem 0}.device-screen{min-height:400px}.code-display{min-height:300px;padding:1rem}}.download-buttons{display:flex;gap:1rem;margin-top:2rem;flex-wrap:wrap}.action-btn{flex:1;min-width:150px;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:1rem 1.5rem;border:none;border-radius:12px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;font-family:inherit}.action-btn svg{font-size:1.25rem}.action-btn.primary{background:linear-gradient(135deg,#667eea,#764ba2);color:#fff;box-shadow:0 4px 16px #667eea66}.action-btn.primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #667eea99}.action-btn.primary:active{transform:translateY(0)}.action-btn.secondary{background:#ffffff14;color:#fff;border:1px solid rgba(255,255,255,.15)}.action-btn.secondary:hover{background:#ffffff1f;border-color:#ffffff40;transform:translateY(-2px)}@media(max-width:768px){.download-buttons{flex-direction:column}.action-btn{width:100%;min-width:auto}}.app-container{min-height:100vh;padding:2rem;position:relative;overflow:hidden}.bg-circles{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0}.circle{position:absolute;border-radius:50%;opacity:.1;animation:float 20s infinite ease-in-out}.circle-1{width:300px;height:300px;background:linear-gradient(135deg,#667eea,#764ba2);top:10%;left:-100px;animation-delay:0s}.circle-2{width:400px;height:400px;background:linear-gradient(135deg,#f093fb,#f5576c);bottom:-150px;right:-150px;animation-delay:5s}.circle-3{width:200px;height:200px;background:linear-gradient(135deg,#4facfe,#00f2fe);top:50%;right:10%;animation-delay:10s}@keyframes float{0%,to{transform:translate(0) scale(1)}33%{transform:translate(30px,-30px) scale(1.1)}66%{transform:translate(-20px,20px) scale(.9)}}.content{position:relative;z-index:1;max-width:1400px;margin:0 auto}.header{text-align:center;margin-bottom:3rem;animation:fadeInDown .8s ease-out}.header h1{font-size:3rem;font-weight:800;background:linear-gradient(135deg,#667eea,#764ba2);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:.5rem}.header p{font-size:1.1rem;color:#ffffffb3;font-weight:300}.main-grid{display:grid;grid-template-columns:1fr 1.5fr;gap:2rem;animation:fadeInUp .8s ease-out .2s backwards}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeInUp{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.main-grid{grid-template-columns:1fr}.header h1{font-size:2.5rem}}@media(max-width:768px){.app-container{padding:1rem}.header{margin-bottom:2rem}.header h1{font-size:2rem}.header p{font-size:1rem}}