@import url(https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap);body{background-color:#f0fcff;font-family:Roboto,sans-serif;margin:0}.app-container{align-items:center;background-color:#e0f7fa;display:flex;flex-direction:column;min-height:100vh;padding:20px}.web-a4-paper{background:#fff;box-shadow:0 0 10px #0000001a;box-sizing:border-box;max-width:850px;padding:40px;width:100%}.web-header-bar{align-items:center;background-color:#0077b6;display:flex;height:40px;justify-content:center;left:0;position:absolute;right:0;top:0}.web-header-logo{height:40px}.web-title{color:#0077b6;font-size:32px;font-weight:700;margin-bottom:5px;margin-top:20px;text-align:center}.web-subtitle{color:#555;font-size:20px;margin-bottom:30px;text-align:center}*{box-sizing:border-box}.web-intro-section{background-color:#f0f0f0;display:flex;flex-direction:row;gap:20px;margin-bottom:20px;width:100%}.web-intro-right{word-wrap:break-word;background-color:#0077b6;border-radius:6px;color:#fff;flex:1 1;font-size:14px;line-height:1.5;margin-bottom:10px;margin-top:10px;overflow-wrap:break-word;padding:15px;text-align:left}.web-intro-left{align-items:center;display:flex;flex:2 1;flex-direction:column}.photo-preview-web{background-color:#ddd;border:3px solid #fff;border-radius:8px;box-shadow:0 2px 5px #0003;height:150px;margin-bottom:15px;margin-top:20px;object-fit:cover;width:150px}.upload-controls{text-align:center;width:100%}.upload-btn-label{background-color:#0077b6;border-radius:5px;color:#fff;cursor:pointer;display:inline-block;font-size:14px;margin-bottom:10px;padding:8px 15px}.piktogram-grid{display:flex;flex-wrap:wrap;gap:5px;justify-content:center;margin-top:10px}.piktogram-thumb{border:2px solid #0000;border-radius:5px;cursor:pointer;height:50px;transition:all .2s;width:50px}.piktogram-thumb:hover{transfrom:scale(1.1)}.piktogram-thumb.selected{border-color:#0077b6}.section-banner{font-size:24px;text-align:left}.section-banner,.section-banner-title{align-items:center;border-radius:8px;display:flex;font-weight:700;gap:12px;margin-bottom:10px;padding:8px 15px}.section-banner-title{font-size:26px;justify-content:center;text-align:center}.banner-pink{background-color:#facccc;color:#000}.banner-green{background-color:#b7ecb7;color:#000}.banner-yellow{background-color:#ffbc5e;color:#000}.banner-grey{background-color:#d0d0d0;color:#000}.banner-icon{flex-shrink:0;height:100px;object-fit:contain;width:100px}.form-container-green,.form-container-grey,.form-container-pink,.form-container-yellow{display:flex;flex-direction:column;gap:8px;width:100%}.row-column{display:flex;flex:1 1;flex-direction:column;gap:12px}.row-sub-field{display:flex;gap:10px}.row-label-small{color:#333;font-size:20px;font-weight:700;width:220px}.field-row-pink{align-items:center;background-color:#fff8f8;border:2px solid #facccc;border-radius:8px;display:flex;gap:15px;padding:10px 15px}.field-row-pink.align-start{align-items:flex-start}.field-row-green{align-items:center;background-color:#f4fef4;border:2px solid #ccfacc;border-radius:8px;display:flex;gap:15px;padding:10px 15px}.field-row-green.align-start{align-items:flex-start}.field-row-yellow{align-items:center;background-color:#fff1d8;border:2px solid #fafacc;border-radius:8px;display:flex;gap:15px;padding:10px 15px}.field-row-yellow.align-start{align-items:flex-start}.row-icon{height:80px;object-fit:contain;width:80px}.row-label{color:#333;font-size:20px;font-weight:700;width:200px}.row-input{border:1px solid #facccc;border-radius:4px;box-sizing:border-box;flex:1 1;font-family:inherit;font-size:20px;max-width:100%;padding:8px 12px;resize:none;width:100%}.content-wrapper{display:flex;flex:1 1;gap:10px}textarea.row-input{min-height:80px;resize:vertical}.row-subtitle-pink{color:#d63384;font-size:18px;font-weight:700;text-align:center;text-transform:uppercase;width:100%}.form-container{border-top:2px dashed #eee;margin-top:40px;padding-top:20px}.form-grid{grid-gap:15px;display:grid;gap:15px;grid-template-columns:1fr 1fr}.form-group{margin-bottom:15px}.form-label{color:#555;display:block;font-weight:700;margin-bottom:5px}.form-input{border:1px solid #ccc;border-radius:5px;box-sizing:border-box;font-family:Roboto;padding:10px;width:100%}.generate-btn{background-color:#4caf50;border:none;border-radius:5px;color:#fff;cursor:pointer;font-size:18px;font-weight:700;margin-top:20px;padding:15px;width:100%}.download-area{background-color:#f9fff9;border:2px dashed #4caf50;border-radius:10px;padding:20px}.download-area,.download-link{margin-top:20px;text-align:center}.download-link{background-color:#fff;border-radius:8px;color:#0077b6;display:block;font-size:18px;font-weight:700;padding:15px;text-decoration:none;width:100%}.input-with-counter{display:flex;flex-direction:column;width:65%}.char-counter{color:#888;display:block;font-family:sans-serif;font-size:12px;margin-top:4px;text-align:right}.char-counter-limit{color:#d32f2f;font-weight:700}@media (max-width:600px){.app-container{padding:10px}.web-a4-paper{padding:20px 15px}.web-title{font-size:22px}.web-intro-section{flex-direction:column;gap:15px}.web-intro-left,.web-intro-right{width:100%}.form-grid{grid-template-columns:1fr;padding:15px}textarea.form-input{grid-column:span 1}.photo-preview-web{height:120px;width:120px}.piktogram-grid{gap:5px;grid-template-columns:repeat(4,1fr)}.generate-btn{font-size:16px;width:100%}.section-banner{border-radius:6px;gap:8px;margin-bottom:8px;padding:6px 10px}.banner-text,.section-banner span{font-size:16px!important;letter-spacing:.5px}.section-banner-title{border-radius:6px;font-size:16px!important;padding:6px 10px}.banner-icon{height:30px!important;padding:2px;width:30px!important}.content-wrapper{align-items:center;flex-direction:column;width:100%}.field-row-green,.field-row-green.align-start,.field-row-pink,.field-row-pink.align-start,.field-row-yellow,.field-row-yellow.align-start{align-items:center;flex-direction:column;gap:15px;padding:15px;text-align:left}.row-sub-field{align-items:flex-start;align-items:center;flex-direction:column;gap:4px}.input-with-counter{width:100%}.row-label-small{font-size:16px;width:100%}.row-label{width:100%}.row-input{box-sizing:border-box;font-size:16px;width:100%}.row-column{gap:20px;width:100%}.row-icon{height:50px;width:50px}}
/*# sourceMappingURL=main.8ff10a0e.css.map*/