.badge-card{position:relative;width:856px;height:540px;overflow:hidden;border:2px solid #14161a;border-radius:24px;background:#fff;color:#14161a;font-family:Segoe UI,Helvetica Neue,Arial,sans-serif;font-size:16px;line-height:1.3}.badge-rule{width:132px;height:5px;background:linear-gradient(90deg,#c41e3a,#c41e3a 55%,#fdb913 55%,#fdb913)}.badge-card--front{display:flex;align-items:stretch;padding:30px 34px}.badge-main{flex:1 1 auto;min-width:0;padding-right:28px}.badge-logo{display:block;width:208px;height:auto}.badge-title{margin:20px 0 12px}.badge-title__kicker{display:block;font-size:16px;font-weight:600;letter-spacing:3.4px;text-transform:uppercase;color:#c41e3a}.badge-title__strong{display:block;font-size:30px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:#14161a}.badge-fields{display:grid;grid-template-columns:auto 1fr;align-items:baseline;column-gap:16px;row-gap:18px;margin:26px 0 0}.badge-fields dt{margin:0;font-size:18px;font-weight:700;color:#5c6472;white-space:nowrap}.badge-fields dd{margin:0;font-size:23px;font-weight:500;color:#14161a}.badge-fields__strong{font-size:26px!important;font-weight:700!important}.badge-fields__wide{font-size:19px!important}.badge-fields__mono{font-family:Consolas,SFMono-Regular,Menlo,monospace;font-size:20px!important;letter-spacing:.2px}.badge-side{display:flex;flex:0 0 auto;flex-direction:column;justify-content:space-between;width:184px}.badge-photo{width:184px;height:238px;overflow:hidden;border:2px solid #d7dbe2;border-radius:10px;background:#f3f4f6}.badge-photo__img{display:block;width:100%;height:100%;object-fit:cover}.badge-photo__placeholder{display:block;height:100%;font-size:68px;font-weight:800;line-height:234px;text-align:center;color:#c9ced6}.badge-signature{text-align:center}.badge-signature__label{display:block;margin-bottom:2px;font-size:16px;font-weight:700;color:#5c6472}.badge-signature__img{display:block;width:100%;height:92px;object-fit:contain}.badge-signature--empty{padding-bottom:92px}.badge-card--back{padding:30px 34px}.badge-back-head{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:12px}.badge-back-title{margin:0;font-size:27px;font-weight:800;letter-spacing:2.4px;text-transform:uppercase;color:#14161a}.badge-back-logo{width:168px;height:auto;margin-top:-6px}.badge-company{margin:28px 0 0;font-size:29px;font-weight:800;color:#c41e3a}.badge-fields--back{margin-top:22px;row-gap:18px}.badge-fields--back dd{font-size:21px}.badge-fields--back .badge-fields__mono{font-size:19px!important}.badge-legal{position:absolute;right:0;bottom:0;left:0;padding:18px 34px 22px;border-top:2px solid #e5e7eb;background:#f7f8f9;font-size:17px;line-height:1.4;color:#3f4653}.badge-legal p{margin:0}.badge-legal__title{margin-bottom:6px!important;font-size:17px;font-weight:800;text-transform:uppercase;color:#14161a}.badge-legal__return{margin-top:8px!important;font-style:italic}.badge-stage{--badge-scale: .5;width:calc(856px * var(--badge-scale));height:calc(540px * var(--badge-scale));border-radius:calc(24px * var(--badge-scale));box-shadow:0 10px 30px #0000002e}.badge-stage>.badge-card{transform:scale(var(--badge-scale));transform-origin:top left}.badge-workspace{display:grid;grid-template-columns:minmax(280px,340px) 1fr;gap:40px;width:100%;align-items:start;animation:fadeIn .4s ease-out}.badge-form__title{font-size:18px;font-weight:700;color:var(--color-dark);margin-bottom:18px}.badge-form__warning{padding:10px 12px;margin-bottom:18px;border-left:3px solid var(--color-secondary);border-radius:4px;background:#fdb9131f;font-size:13px;line-height:1.45;color:#8a6100}.badge-form__hint{margin-top:18px;font-size:12px;line-height:1.5;color:#888}.badge-form__hint code{padding:1px 5px;border-radius:4px;background:var(--color-medium-gray);font-size:11px;color:var(--color-dark)}.badge-input-group{display:block;margin-bottom:16px}.badge-input-group>span{display:block;margin-bottom:6px;font-size:11px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:#8b93a1}.badge-input-group input[type=text]{width:100%;padding:11px 13px;border:2px solid var(--color-medium-gray);border-radius:8px;background:var(--color-white);font-family:inherit;font-size:15px;color:var(--color-dark);outline:none;transition:border-color .2s ease,box-shadow .2s ease}.badge-input-group input[type=text]:focus{border-color:var(--color-primary);box-shadow:0 0 0 3px #c41e3a1f}.badge-input-group input[type=text].is-missing{border-color:var(--color-secondary);background:#fdb91314}.badge-photo-actions{display:flex;gap:8px}.badge-photo-actions .btn{flex:1 1 auto;min-width:0}.badge-preview{display:flex;flex-direction:column;align-items:center}.badge-face-switch{display:inline-flex;padding:4px;margin-bottom:20px;border-radius:10px;background:var(--color-light-gray)}.badge-face-switch button{padding:8px 26px;border-radius:7px;background:transparent;font-size:14px;font-weight:600;color:#777;transition:all .2s ease}.badge-face-switch button.is-active{background:var(--color-white);color:var(--color-primary);box-shadow:0 2px 6px #0000001f}.badge-preview__caption{margin:16px 0 24px;font-size:12px;letter-spacing:.5px;color:#999}.badge-preview .button-group{width:100%}.badge-preview .btn{min-width:0}.badge-export-stage{position:fixed;top:0;left:-20000px;width:856px;pointer-events:none}@media (max-width: 980px){.badge-workspace{grid-template-columns:1fr;gap:32px}.badge-stage{--badge-scale: .42}}@media (max-width: 620px){.badge-stage{--badge-scale: .3}.badge-face-switch button{padding:8px 18px}}.badge-input-note{margin-top:6px;font-size:12px;color:#7b8494}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background:linear-gradient(135deg,var(--color-dark) 0%,#2a2a2a 100%)}.container{position:relative;width:100%;max-width:800px;transition:max-width .35s ease;background:var(--color-white);border-radius:16px;box-shadow:0 20px 60px var(--color-shadow-dark),0 0 60px #c41e3a73,0 0 120px #fdb91340;overflow:hidden;animation:haloPulse 4s ease-in-out infinite}.container:before{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;z-index:-1;border-radius:19px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));filter:blur(16px);opacity:.65}@keyframes haloPulse{0%,to{box-shadow:0 20px 60px var(--color-shadow-dark),0 0 60px #c41e3a73,0 0 120px #fdb91340}50%{box-shadow:0 20px 60px var(--color-shadow-dark),0 0 80px #c41e3a99,0 0 150px #fdb91359}}.container--wide{max-width:1180px}.header{position:relative;background:linear-gradient(135deg,var(--color-dark) 0%,#2a2a2a 100%);color:var(--color-white);padding:40px 30px;text-align:center}.logo{width:100px;height:100px;margin-bottom:20px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.3))}.header h1{font-size:32px;font-weight:700;margin-bottom:8px;color:var(--color-white)}.header p{font-size:16px;opacity:.9;color:var(--color-secondary)}.main{padding:50px 30px;min-height:400px;display:flex;align-items:center;justify-content:center}.upload-section{width:100%}.upload-area{display:block;border:2px dashed var(--color-primary);border-radius:12px;padding:40px;text-align:center;cursor:pointer;transition:all .3s ease;background-color:var(--color-light-gray);position:relative;overflow:hidden}.upload-area:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);transition:left .5s ease}.upload-area:hover:before{left:100%}.upload-area:hover{border-color:var(--color-secondary);background-color:#f0f0f0;transform:translateY(-4px)}.upload-area.active{border-color:var(--color-secondary);background:linear-gradient(135deg,#fdb9131a,#c41e3a1a);transform:scale(1.02)}.upload-icon{font-size:48px;margin-bottom:16px;animation:pulse 2s ease-in-out infinite}.upload-area h2{font-size:24px;color:var(--color-dark);margin-bottom:8px;font-weight:600}.upload-area p{font-size:14px;color:#666;margin:4px 0}.upload-area .text-secondary{color:var(--color-primary);font-weight:500}.loading-section{text-align:center;animation:fadeIn .4s ease-out}.spinner{width:60px;height:60px;border:4px solid var(--color-medium-gray);border-top-color:var(--color-primary);border-radius:50%;margin:0 auto 30px;animation:spin 1s linear infinite}.loading-section h2{font-size:24px;color:var(--color-dark);margin-bottom:8px;font-weight:600}.loading-section p{font-size:14px;color:#666}.success-section{text-align:center;animation:fadeIn .4s ease-out}.success-icon{width:80px;height:80px;background:linear-gradient(135deg,var(--color-primary),var(--color-secondary));border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--color-white);margin:0 auto 24px;animation:slideInLeft .5s ease-out;box-shadow:0 8px 24px #c41e3a4d}.success-section h2{font-size:24px;color:var(--color-dark);margin-bottom:8px;font-weight:600}.success-section p{font-size:14px;color:#666;margin-bottom:30px}.error-section{text-align:center;animation:fadeIn .4s ease-out}.error-icon{width:80px;height:80px;background:linear-gradient(135deg,#ff6b6b,#ff8787);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:48px;color:var(--color-white);margin:0 auto 24px;animation:slideInLeft .5s ease-out;box-shadow:0 8px 24px #ff6b6b4d}.error-section h2{font-size:24px;color:var(--color-dark);margin-bottom:8px;font-weight:600}.error-section p{font-size:14px;color:#666;margin-bottom:30px}.button-group{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;animation:slideInRight .5s ease-out}.btn{padding:12px 24px;border-radius:8px;font-size:16px;font-weight:600;transition:all .3s ease;min-width:200px}.btn-primary{background:linear-gradient(135deg,var(--color-primary),#a01729);color:var(--color-white);box-shadow:0 4px 12px #c41e3a4d}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px #c41e3a66}.btn-primary:active{transform:translateY(0)}.btn-secondary{background:var(--color-light-gray);color:var(--color-primary);border:2px solid var(--color-primary);box-shadow:none}.btn-secondary:hover{background:var(--color-primary);color:var(--color-white);transform:translateY(-2px)}.btn-secondary:active{transform:translateY(0)}.back-button{position:absolute;top:20px;left:20px;padding:8px 14px;border:1px solid rgba(255,255,255,.25);border-radius:8px;background:#ffffff14;font-size:13px;font-weight:600;color:var(--color-white);transition:all .25s ease}.back-button:hover{border-color:var(--color-secondary);background:#fdb91326;color:var(--color-secondary)}.tool-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;width:100%}.tool-card{display:flex;flex-direction:column;align-items:flex-start;padding:28px 24px;border:2px solid var(--color-medium-gray);border-radius:14px;background:var(--color-light-gray);text-align:left;transition:all .3s ease;animation:fadeIn .4s ease-out}.tool-card:hover{border-color:var(--color-primary);background:var(--color-white);transform:translateY(-4px);box-shadow:0 12px 28px #c41e3a2e}.tool-card__icon{font-size:36px;line-height:1;margin-bottom:16px}.tool-card__name{font-size:20px;font-weight:700;color:var(--color-dark)}.tool-card__tagline{margin-top:4px;font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--color-primary)}.tool-card__description{margin-top:14px;font-size:14px;line-height:1.5;color:#666}.tool-card__cta{margin-top:20px;font-size:14px;font-weight:600;color:var(--color-primary);transition:transform .25s ease}.tool-card:hover .tool-card__cta{transform:translate(4px)}.btn-ghost{display:inline-block;padding:10px 18px;border:1px solid var(--color-medium-gray);border-radius:8px;background:var(--color-white);font-size:14px;font-weight:600;text-align:center;color:#666;cursor:pointer;transition:all .25s ease}.btn-ghost:hover{border-color:var(--color-primary);color:var(--color-primary)}.btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}.footer{background:var(--color-light-gray);padding:20px;text-align:center;border-top:1px solid var(--color-medium-gray)}.footer p{font-size:12px;color:#999}@media (max-width: 600px){.container{border-radius:12px}.header{padding:30px 20px}.back-button{top:12px;left:12px;padding:6px 10px;font-size:12px}.tool-card{padding:22px 20px}.header h1{font-size:24px}.logo{width:80px;height:80px}.main{padding:30px 20px;min-height:350px}.upload-area{padding:30px 20px}.upload-icon{font-size:36px}.upload-area h2{font-size:18px}.upload-area p{font-size:12px}.success-icon,.error-icon{width:60px;height:60px;font-size:32px}.button-group{flex-direction:column}.btn{min-width:100%}}*{margin:0;padding:0;box-sizing:border-box}:root{--color-primary: #c41e3a;--color-secondary: #fdb913;--color-dark: #1a1a1a;--color-white: #ffffff;--color-light-gray: #f5f5f5;--color-medium-gray: #e8e8e8;--color-shadow: rgba(0, 0, 0, .1);--color-shadow-dark: rgba(0, 0, 0, .2)}html{font-family:-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}body{background:linear-gradient(135deg,var(--color-dark) 0%,#2a2a2a 100%);color:var(--color-dark);min-height:100vh}@keyframes fadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideInLeft{0%{opacity:0;transform:translate(-30px)}to{opacity:1;transform:translate(0)}}@keyframes slideInRight{0%{opacity:0;transform:translate(30px)}to{opacity:1;transform:translate(0)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.7}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}button{font-family:inherit;cursor:pointer;border:none;outline:none}input[type=file]{display:none}