*{box-sizing:border-box;margin:0;padding:0}body{color:#1a1a2e;background:linear-gradient(135deg,#f5f7fa 0%,#e4e8ec 100%);min-height:100vh;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5}#root{min-height:100vh}.form-page,.template-page,.preview-page{justify-content:center;align-items:center;min-height:100vh;padding:40px 20px;display:flex}.form-container{background:#fff;border-radius:16px;width:100%;max-width:560px;padding:48px;box-shadow:0 4px 24px #00000014}.form-header{text-align:center;margin-bottom:40px}.form-header h1{color:#1a1a2e;margin-bottom:8px;font-size:28px;font-weight:700}.form-header p{color:#6b7280;font-size:15px}.form-group{margin-bottom:24px}.form-group label{color:#374151;margin-bottom:8px;font-size:14px;font-weight:500;display:block}.form-group input,.form-group select{background:#fafafa;border:1px solid #d1d5db;border-radius:10px;width:100%;padding:14px 16px;font-size:15px;transition:all .2s}.form-group input:focus,.form-group select:focus{background:#fff;border-color:#0891b2;outline:none;box-shadow:0 0 0 3px #0891b21a}.form-group input::placeholder{color:#9ca3af}.form-group .hint{color:#9ca3af;margin-top:6px;font-size:12px;display:block}.form-row{grid-template-columns:1fr 1fr;gap:16px;display:grid}@media (width<=480px){.form-row{grid-template-columns:1fr}}.error-message{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;margin-bottom:24px;padding:12px 16px;font-size:14px}.submit-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0891b2 0%,#0e7490 100%);border:none;border-radius:10px;width:100%;padding:16px;font-size:16px;font-weight:600;transition:all .2s}.submit-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0891b24d}.submit-btn:disabled{opacity:.7;cursor:not-allowed}.template-container{width:100%;max-width:1100px}.template-header{text-align:center;margin-bottom:48px}.template-header h1{color:#1a1a2e;margin-bottom:8px;font-size:32px;font-weight:700}.template-header p{color:#6b7280;font-size:16px}.template-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px;display:grid}@media (width<=900px){.template-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=560px){.template-grid{grid-template-columns:1fr}}.template-card{cursor:pointer;background:#fff;border:3px solid #0000;border-radius:16px;transition:all .3s;position:relative;overflow:hidden}.template-card:hover{transform:translateY(-4px);box-shadow:0 12px 24px #0000001a}.template-card.selected{border-color:#0891b2}.template-preview{justify-content:center;align-items:center;height:180px;display:flex}.preview-content{align-items:center;gap:16px;padding:20px;display:flex}.preview-photo{background:#ffffff4d;border-radius:50%;width:48px;height:48px}.preview-lines{flex-direction:column;gap:8px;display:flex}.preview-line{background:#fff6;border-radius:4px;height:8px}.preview-line.long{width:100px}.preview-line.medium{width:70px}.preview-line.short{width:50px}.template-info{text-align:left;padding:20px}.template-info h3{color:#1a1a2e;margin-bottom:4px;font-size:18px;font-weight:600}.template-info p{color:#6b7280;font-size:13px}.selected-badge{color:#fff;background:#0891b2;border-radius:20px;padding:4px 12px;font-size:12px;font-weight:600;position:absolute;top:12px;right:12px}.continue-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0891b2 0%,#0e7490 100%);border:none;border-radius:10px;width:100%;max-width:320px;margin:0 auto;padding:16px;font-size:16px;font-weight:600;transition:all .2s;display:block}.continue-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0891b24d}.continue-btn:disabled{opacity:.5;cursor:not-allowed}.preview-container{text-align:center;width:100%;max-width:600px}.preview-header{margin-bottom:32px}.preview-header h1{color:#1a1a2e;margin-bottom:8px;font-size:28px;font-weight:700}.preview-header p{color:#6b7280;font-size:15px}.card-wrapper{background:#fff;border-radius:16px;margin-bottom:32px;padding:24px;box-shadow:0 4px 24px #00000014}.preview-actions{justify-content:center;gap:16px;margin-bottom:24px;display:flex}.action-btn{cursor:pointer;border:none;border-radius:10px;padding:14px 32px;font-size:15px;font-weight:600;transition:all .2s}.action-btn.primary{color:#fff;background:linear-gradient(135deg,#0891b2 0%,#0e7490 100%)}.action-btn.primary:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0891b24d}.action-btn.secondary{color:#0891b2;background:#fff;border:2px solid #0891b2}.action-btn.secondary:hover{background:#f0fdfa}.action-btn:disabled{opacity:.7;cursor:not-allowed}.preview-links{justify-content:center;gap:24px;display:flex}.link-btn{color:#6b7280;cursor:pointer;background:0 0;border:none;font-size:14px;text-decoration:underline;transition:color .2s}.link-btn:hover{color:#0891b2}.card-template{border-radius:12px;width:100%;max-width:400px;margin:0 auto;font-size:14px;overflow:hidden}.card-template.modern{color:#fff;background:linear-gradient(135deg,#1e3a5f 0%,#2d5a87 100%)}.card-template.modern .card-header{border-bottom:1px solid #fff3;justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-template.modern .card-logo{letter-spacing:2px;font-size:12px;font-weight:700}.card-template.modern .card-institution{opacity:.9;font-size:11px}.card-template.modern .card-body{gap:20px;padding:20px;display:flex}.card-template.modern .card-photo{border-radius:8px;flex-shrink:0;width:80px;height:100px;overflow:hidden}.card-template.modern .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.modern .card-details{text-align:left;flex:1}.card-template.modern .card-name{margin-bottom:12px;font-size:18px;font-weight:600}.card-template.modern .card-info .info-row{gap:8px;margin-bottom:6px;font-size:12px;display:flex}.card-template.modern .card-info .label{opacity:.7;width:50px}.card-template.modern .card-info .value{font-weight:500}.card-template.modern .card-footer{opacity:.9;background:#0003;justify-content:space-between;padding:12px 20px;font-size:11px;display:flex}.card-template.classic{color:#fff;background:linear-gradient(135deg,#2c3e50 0%,#34495e 100%)}.card-template.classic .card-header{text-align:center;border-bottom:2px solid #ffffff4d;padding:20px}.card-template.classic .card-emblem{background:#fff3;border-radius:50%;width:40px;height:40px;margin:0 auto 12px}.card-template.classic .header-text h3{margin-bottom:4px;font-size:16px;font-weight:600}.card-template.classic .header-text p{opacity:.8;font-size:11px}.card-template.classic .card-body{gap:20px;padding:20px;display:flex}.card-template.classic .card-photo{border:2px solid #ffffff4d;border-radius:4px;width:80px;height:100px;overflow:hidden}.card-template.classic .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.classic .card-details{text-align:left;flex:1}.card-template.classic .card-name{margin-bottom:12px;font-size:18px;font-weight:600}.card-template.classic .info-table{width:100%;font-size:12px}.card-template.classic .info-table td{padding:4px 0}.card-template.classic .info-table td:first-child{opacity:.7;width:80px}.card-template.classic .card-footer{text-align:center;background:#0003;padding:12px 20px}.card-template.classic .validity{opacity:.8;font-size:10px}.card-template.vibrant{color:#fff;background:linear-gradient(135deg,#0891b2 0%,#06b6d4 100%);position:relative}.card-template.vibrant .card-accent{background:#ffffff1a;border-radius:0 0 0 100%;width:120px;height:120px;position:absolute;top:0;right:0}.card-template.vibrant .card-content{z-index:1;position:relative}.card-template.vibrant .card-top{justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-template.vibrant .badge{letter-spacing:1px;background:#fff3;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:700}.card-template.vibrant .institution{opacity:.9;font-size:12px}.card-template.vibrant .card-main{text-align:center;padding:0 20px 20px}.card-template.vibrant .card-photo{border:3px solid #fff6;border-radius:50%;width:80px;height:80px;margin:0 auto 12px;overflow:hidden}.card-template.vibrant .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.vibrant .card-name{margin-bottom:4px;font-size:20px;font-weight:600}.card-template.vibrant .card-course{opacity:.9;font-size:12px}.card-template.vibrant .card-bottom{background:#00000026;justify-content:space-around;padding:16px 20px;display:flex}.card-template.vibrant .card-bottom .info-item{text-align:center}.card-template.vibrant .card-bottom .label{opacity:.8;margin-bottom:2px;font-size:10px;display:block}.card-template.vibrant .card-bottom .value{font-size:12px;font-weight:600}.card-template.minimal{color:#fff;background:linear-gradient(135deg,#374151 0%,#4b5563 100%)}.card-template.minimal .card-body{align-items:center;gap:20px;padding:24px;display:flex}.card-template.minimal .card-photo{border-radius:50%;width:70px;height:70px;overflow:hidden}.card-template.minimal .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.minimal .card-details{text-align:left;flex:1}.card-template.minimal .card-name{margin-bottom:2px;font-size:18px;font-weight:600}.card-template.minimal .card-id{opacity:.7;margin-bottom:12px;font-size:12px}.card-template.minimal .divider{background:#fff3;height:1px;margin-bottom:12px}.card-template.minimal .card-course,.card-template.minimal .card-year,.card-template.minimal .card-institution{opacity:.9;margin-bottom:2px;font-size:12px}.card-template.minimal .card-footer{text-align:center;background:#0003;padding:12px 24px;font-size:11px}.card-template.premium{color:#fff;background:linear-gradient(135deg,#1a1a2e 0%,#16213e 100%);position:relative}.card-template.premium .gold-border{pointer-events:none;border:1px solid #d4af37;border-radius:8px;position:absolute;inset:8px}.card-template.premium .card-content{z-index:1;position:relative}.card-template.premium .card-header{text-align:center;padding:20px 24px}.card-template.premium .premium-badge{color:#1a1a2e;letter-spacing:2px;background:linear-gradient(135deg,#d4af37 0%,#f4d03f 100%);border-radius:20px;margin-bottom:8px;padding:4px 16px;font-size:10px;font-weight:700;display:inline-block}.card-template.premium .institution{font-size:14px;font-weight:500}.card-template.premium .card-main{gap:20px;padding:0 24px 20px;display:flex}.card-template.premium .card-photo{border:2px solid #d4af37;border-radius:6px;width:80px;height:100px;overflow:hidden}.card-template.premium .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.premium .card-info{text-align:left;flex:1}.card-template.premium .card-name{margin-bottom:8px;font-size:18px;font-weight:600}.card-template.premium .gold-line{background:linear-gradient(90deg,#d4af37 0%,#0000 100%);width:60px;height:2px;margin-bottom:12px}.card-template.premium .details{font-size:12px}.card-template.premium .details p{margin-bottom:4px}.card-template.premium .details strong{color:#d4af37}.card-template.premium .card-footer{opacity:.8;border-top:1px solid #d4af374d;justify-content:space-between;padding:12px 24px;font-size:11px;display:flex}.card-template.nature{color:#fff;background:linear-gradient(135deg,#065f46 0%,#059669 100%);position:relative}.card-template.nature .leaf-pattern{background:#ffffff0d;border-radius:0 0 0 100%;width:100px;height:100px;position:absolute;top:0;right:0}.card-template.nature .card-content{z-index:1;position:relative}.card-template.nature .card-header{justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-template.nature .eco-badge{letter-spacing:1px;background:#fff3;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:700}.card-template.nature .institution{opacity:.9;font-size:12px}.card-template.nature .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.nature .card-photo{border:2px solid #ffffff4d;border-radius:8px;width:80px;height:100px;overflow:hidden}.card-template.nature .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.nature .card-details{text-align:left;flex:1}.card-template.nature .card-name{margin-bottom:4px;font-size:18px;font-weight:600}.card-template.nature .student-id{opacity:.8;margin-bottom:12px;font-size:12px}.card-template.nature .info-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.card-template.nature .info-grid .info-item .label{opacity:.7;font-size:10px;display:block}.card-template.nature .info-grid .info-item .value{font-size:13px;font-weight:500}.card-template.nature .card-footer{text-align:center;background:#00000026;padding:12px 20px;font-size:11px}.photo-upload-area{text-align:center;border:2px dashed #d1d5db;border-radius:10px;padding:20px;transition:all .2s}.photo-upload-area:hover{background:#f0fdfa;border-color:#0891b2}.upload-btn{color:#fff;cursor:pointer;background:linear-gradient(135deg,#0891b2 0%,#0e7490 100%);border:none;border-radius:8px;align-items:center;gap:8px;padding:12px 24px;font-size:14px;font-weight:500;transition:all .2s;display:inline-flex}.upload-btn:hover:not(:disabled){transform:translateY(-1px);box-shadow:0 4px 12px #0891b24d}.upload-btn:disabled{opacity:.7;cursor:not-allowed}.photo-preview-container{flex-direction:column;align-items:center;gap:12px;display:flex}.photo-preview{object-fit:cover;border:3px solid #0891b2;border-radius:50%;width:100px;height:100px}.change-photo-btn{color:#0891b2;cursor:pointer;background:0 0;border:1px solid #0891b2;border-radius:6px;padding:8px 16px;font-size:13px;transition:all .2s}.change-photo-btn:hover:not(:disabled){background:#f0fdfa}.card-template.gradient{color:#fff;background:linear-gradient(135deg,#667eea 0%,#764ba2 100%)}.card-template.gradient .card-content{z-index:1;position:relative}.card-template.gradient .card-header{text-align:center;padding:16px 20px}.card-template.gradient .badge{letter-spacing:1px;background:#fff3;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:700;display:inline-block}.card-template.gradient .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.gradient .card-photo{border:2px solid #ffffff4d;border-radius:8px;width:80px;height:100px;overflow:hidden}.card-template.gradient .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.gradient .card-details{text-align:left;flex:1}.card-template.gradient .card-name{margin-bottom:4px;font-size:18px;font-weight:600}.card-template.gradient .card-institution{opacity:.8;margin-bottom:12px;font-size:12px}.card-template.gradient .info-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.card-template.gradient .info-grid .info-item .label{opacity:.7;font-size:10px;display:block}.card-template.gradient .info-grid .info-item .value{font-size:12px;font-weight:500}.card-template.dark{color:#fff;background:linear-gradient(135deg,#0f0f23 0%,#1a1a3e 100%);position:relative}.card-template.dark .card-glow{pointer-events:none;background:radial-gradient(circle,#00ff881a 0%,#0000 70%);width:200px;height:200px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.card-template.dark .card-content{z-index:1;position:relative}.card-template.dark .card-header{justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-template.dark .neon-badge{color:#0f8;letter-spacing:1px;background:#0f83;border:1px solid #00ff884d;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:700}.card-template.dark .institution{opacity:.8;font-size:12px}.card-template.dark .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.dark .card-photo{border:2px solid #00ff884d;border-radius:8px;width:80px;height:100px;overflow:hidden}.card-template.dark .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.dark .card-details{text-align:left;flex:1}.card-template.dark .card-name{margin-bottom:8px;font-size:18px;font-weight:600}.card-template.dark .neon-line{background:linear-gradient(90deg,#0f8 0%,#0000 100%);width:60px;height:2px;margin-bottom:12px}.card-template.dark .info-list{font-size:12px}.card-template.dark .info-list p{margin-bottom:4px}.card-template.dark .info-list .label{color:#0f8}.card-template.dark .card-footer{opacity:.8;background:#0000004d;justify-content:space-between;padding:12px 20px;font-size:11px;display:flex}.card-template.corporate{color:#fff;background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%);position:relative}.card-template.corporate .card-stripe{background:linear-gradient(90deg,#fbbf24 0%,#f59e0b 100%);height:6px;position:absolute;top:0;left:0;right:0}.card-template.corporate .card-content{z-index:1;position:relative}.card-template.corporate .card-header{text-align:center;padding:20px 20px 12px}.card-template.corporate .institution{margin-bottom:4px;font-size:16px;font-weight:600}.card-template.corporate .subtitle{opacity:.8;font-size:11px}.card-template.corporate .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.corporate .card-photo{border:2px solid #ffffff4d;border-radius:4px;width:80px;height:100px;overflow:hidden}.card-template.corporate .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.corporate .card-details{text-align:left;flex:1}.card-template.corporate .card-name{margin-bottom:12px;font-size:18px;font-weight:600}.card-template.corporate .info-rows{font-size:12px}.card-template.corporate .info-rows .info-row{border-bottom:1px solid #ffffff1a;justify-content:space-between;padding:4px 0;display:flex}.card-template.corporate .card-footer{background:#0003;padding:12px 20px}.card-template.corporate .contact-info{opacity:.9;justify-content:space-between;font-size:11px;display:flex}.card-template.retro{color:#fff;background:linear-gradient(135deg,#92400e 0%,#d97706 100%);position:relative}.card-template.retro .card-border{pointer-events:none;border:2px dashed #ffffff4d;border-radius:8px;position:absolute;inset:6px}.card-template.retro .card-content{z-index:1;position:relative}.card-template.retro .card-header{text-align:center;padding:16px 20px}.card-template.retro .retro-badge{letter-spacing:2px;background:#fff3;border-radius:4px;margin-bottom:8px;padding:4px 16px;font-size:12px;font-weight:700;display:inline-block}.card-template.retro .institution{font-size:14px;font-weight:500}.card-template.retro .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.retro .card-photo{border:3px solid #ffffff80;border-radius:4px;width:80px;height:100px;overflow:hidden}.card-template.retro .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.retro .card-details{text-align:left;flex:1}.card-template.retro .card-name{margin-bottom:8px;font-size:18px;font-weight:600}.card-template.retro .retro-divider{background:#ffffff4d;height:2px;margin-bottom:12px}.card-template.retro .info-block{font-size:12px}.card-template.retro .info-block p{margin-bottom:4px}.card-template.retro .card-footer{text-align:center;background:#0003;padding:12px 20px;font-size:11px}.card-template.ocean{color:#fff;background:linear-gradient(135deg,#0369a1 0%,#0ea5e9 100%);position:relative}.card-template.ocean .wave-pattern{background:#ffffff0d;border-radius:100% 100% 0 0;height:60px;position:absolute;bottom:0;left:0;right:0}.card-template.ocean .card-content{z-index:1;position:relative}.card-template.ocean .card-header{justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-template.ocean .wave-badge{letter-spacing:1px;background:#fff3;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:700}.card-template.ocean .institution{opacity:.9;font-size:12px}.card-template.ocean .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.ocean .card-photo{border:2px solid #ffffff4d;border-radius:8px;width:80px;height:100px;overflow:hidden}.card-template.ocean .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.ocean .card-details{text-align:left;flex:1}.card-template.ocean .card-name{margin-bottom:4px;font-size:18px;font-weight:600}.card-template.ocean .student-id{opacity:.8;margin-bottom:12px;font-size:12px}.card-template.ocean .info-grid{grid-template-columns:1fr 1fr;gap:8px;display:grid}.card-template.ocean .info-grid .info-item .label{opacity:.7;font-size:10px;display:block}.card-template.ocean .info-grid .info-item .value{font-size:13px;font-weight:500}.card-template.ocean .card-footer{text-align:center;background:#00000026;padding:12px 20px;font-size:11px}.card-template.sunset{color:#fff;background:linear-gradient(135deg,#ea580c 0%,#f97316 100%);position:relative}.card-template.sunset .sunset-glow{pointer-events:none;background:radial-gradient(circle,#ffffff26 0%,#0000 70%);width:150px;height:150px;position:absolute;top:0;right:0}.card-template.sunset .card-content{z-index:1;position:relative}.card-template.sunset .card-header{justify-content:space-between;align-items:center;padding:16px 20px;display:flex}.card-template.sunset .sun-badge{letter-spacing:1px;background:#fff3;border-radius:20px;padding:4px 12px;font-size:10px;font-weight:700}.card-template.sunset .institution{opacity:.9;font-size:12px}.card-template.sunset .card-body{gap:20px;padding:0 20px 20px;display:flex}.card-template.sunset .card-photo{border:2px solid #ffffff4d;border-radius:8px;width:80px;height:100px;overflow:hidden}.card-template.sunset .card-photo img{object-fit:cover;width:100%;height:100%}.card-template.sunset .card-details{text-align:left;flex:1}.card-template.sunset .card-name{margin-bottom:8px;font-size:18px;font-weight:600}.card-template.sunset .sunset-line{background:linear-gradient(90deg,#fff9 0%,#0000 100%);width:60px;height:2px;margin-bottom:12px}.card-template.sunset .info-list{font-size:12px}.card-template.sunset .info-list p{margin-bottom:4px}.card-template.sunset .info-list .label{opacity:.8}.card-template.sunset .card-footer{opacity:.9;background:#00000026;justify-content:space-between;padding:12px 20px;font-size:11px;display:flex}@media (width<=480px){.form-container{padding:32px 24px}.preview-actions{flex-direction:column}.preview-links{flex-direction:column;gap:12px}}