*{box-sizing:border-box}*,body{margin:0;padding:0}body{color:var(--text-color);background:var(--background-color);font-family:Poppins,Arial,sans-serif;line-height:1.5;width:100%;overflow-x:hidden}.min-h-screen,body,html{width:100%;max-width:100%}.app-container,.form-column,.main-layout,.preview-card,.preview-column,.tabs,.template-card,.template-grid,.template-selection-card,.template-thumbnail,.template-title{width:100%}.tabs{max-width:100%}.app-wrapper{min-height:100vh;display:flex;flex-direction:column;background-color:var(--gray-50)}.button-selector-section{margin-top:1.5rem;margin-bottom:1rem}.button-selector-grid{display:grid;grid-template-columns:1fr;grid-gap:1rem;gap:1rem}.styling-section{border-top:1px solid var(--gray-200);margin-top:1.5rem;margin-bottom:1.5rem;padding-top:1.5rem}.select-wrapper{position:relative;width:100%}.font-family-select{display:block;width:100%;padding:.5rem 2.5rem .5rem .75rem;font-size:1rem;border:1px solid var(--gray-300);border-radius:.375rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%236b7280'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .5rem center;background-size:1.5em 1.5em}.font-family-select:focus{outline:none;border-color:var(--secondary-color);box-shadow:0 0 0 2px rgba(221,172,99,.2)}.error-icon{margin-right:.5rem}@media (min-width:768px){.button-selector-grid{grid-template-columns:1fr 1fr}}.page-title{font-size:2rem;font-weight:700;color:var(--dark-color);text-align:center;margin:2rem 0;width:100%}.section-title{width:100%}.section-title,.template-form-title{font-size:1.25rem;font-weight:600;color:var(--dark-color);margin-bottom:1rem}.button-section-title{font-size:1.125rem;font-weight:500;margin-bottom:.75rem;color:var(--dark-color)}.button-section-description{font-size:.875rem;color:var(--gray-500);margin-bottom:1rem}.document-settings-title,.styling-section-title{font-size:1.125rem;font-weight:500;margin-bottom:1rem;color:var(--dark-color)}.styling-description{color:var(--gray-500);font-style:italic;margin-bottom:1rem}.styling-coming-soon{color:var(--gray-500);font-style:italic;margin-top:1.5rem}.required-fields-note{font-size:.75rem;color:var(--gray-500);margin-top:1.5rem}.footer-tagline{color:var(--gray-300);font-size:.875rem;margin-top:.25rem}.form-help-text{font-size:.875rem;color:var(--gray-500);margin-top:1rem}.form-group{margin-bottom:1.5rem;width:100%}.form-label{display:block;font-size:.875rem;font-weight:600;color:var(--gray-900);margin-bottom:.5rem;width:100%}.form-label.required:after{content:"*";color:var(--red-500);margin-left:.25rem}.form-input{width:100%;padding:.75rem;border:1px solid var(--gray-300);border-radius:.375rem;font-size:.875rem;transition:border-color .15s,box-shadow .15s;max-width:100%}.form-input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,194,203,.1)}textarea.form-input{min-height:100px;resize:vertical;max-width:100%}.custom-file-input{width:100%;max-width:100%}.file-upload-progress-container{display:flex;align-items:center;gap:.75rem;margin-top:.5rem;width:100%}.file-upload-progress-bar{flex:1 1;height:.5rem;background-color:var(--gray-200);border-radius:9999px;overflow:hidden}.file-upload-progress-fill{height:100%;background-color:var(--primary-color);border-radius:9999px;transition:width .3s ease}.file-upload-progress-text{font-size:.75rem;color:var(--gray-600);min-width:2.5rem;text-align:right}.file-upload-error{display:flex;align-items:center;padding:.5rem .75rem;background-color:var(--red-100);color:var(--red-500);border-radius:.375rem;font-size:.875rem;margin-top:.5rem;width:100%}.file-upload-help-text{font-size:.75rem;color:var(--gray-500);margin-top:.5rem;width:100%}.button-selector-container,.button-selector-label,.button-selector-wrapper{width:100%}.button-selector{width:100%;max-width:100%}.btn{max-width:100%}.preview-actions{flex-wrap:wrap;width:100%}.preview-action-button{display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.75rem 1.5rem;border-radius:.375rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s;border:none;min-width:160px}.preview-actions-container,nav{width:100%}nav{max-width:100%}.nav-container{width:100%}.nav-logo-img{height:32px;width:auto;display:block}footer{max-width:100%}.footer-container,.footer-content,footer{width:100%}.footer-brand{text-align:center;width:100%}.footer-logo{display:inline-flex;align-items:center;justify-content:center;margin-bottom:.5rem}.footer-logo-img{height:32px;width:auto;display:block}@media (min-width:768px){.footer-content{flex-direction:row;justify-content:space-between;align-items:center}.footer-brand{text-align:left;width:auto}.footer-logo{justify-content:flex-start;margin-bottom:0}}.preview-container,.preview-wrapper{max-width:100%;width:100%}@media (max-width:768px){*{max-width:100vw;box-sizing:border-box}.app-container,.form-column,.main-layout,.min-h-screen,.preview-column,body,html{width:100%;max-width:100%;overflow-x:hidden}.preview-container{overflow-x:auto;max-width:100%;width:100%}a,button,div,h1,h2,h3,input,label,p,select,span,textarea{white-space:normal;max-width:100%}.preview-container .container,.preview-container .cover-letter-container{transform:none;margin:0 auto}}.preview-container .container .buttons,.preview-container .container .contact-card,.preview-container .container .primary-button,.preview-container .container .secondary-button,.preview-container .cover-letter-container .buttons,.preview-container .cover-letter-container .contact-card,.preview-container .cover-letter-container .primary-button,.preview-container .cover-letter-container .secondary-button{max-width:100%}.content-items{border:1px solid #e5e7eb;border-radius:.5rem;margin-bottom:2rem;overflow:hidden}.content-item{border-bottom:1px solid #e5e7eb;padding:1rem;margin-bottom:0}.content-item:last-child{border-bottom:none}.content-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.5rem;padding:.5rem;background-color:#f9fafb;border-radius:.25rem}.content-item-title{font-weight:500;color:#374151}.content-item-actions{display:flex;gap:.5rem}.content-item-actions button{background:none;border:none;cursor:pointer;color:#6b7280;padding:.25rem;border-radius:.25rem;transition:all .2s;font-size:1.25rem}.content-item-actions button:hover{background-color:#f3f4f6;color:#374151}.content-item-actions .edit-button{color:#3b82f6}.content-item-actions .edit-button:hover{background-color:#dbeafe;color:#2563eb}.content-item-actions .remove-button{color:#ef4444}.content-item-actions .remove-button:hover{background-color:#fee2e2;color:#dc2626}.content-item-actions .move-button{color:#6b7280;font-size:1.25rem;padding:.25rem .5rem}.content-item-actions .move-button:hover{background-color:#f3f4f6;color:#374151}.content-item-actions .move-button:disabled{opacity:.3;cursor:not-allowed}.content-type-selector{display:flex;align-items:center;margin-bottom:1rem;padding:1rem;border:1px solid #e5e7eb;border-radius:.375rem;background-color:#f9fafb}.content-type-label{margin-right:1rem;font-weight:500;color:#374151;min-width:120px}.content-type-selector select{flex:1 1;padding:.5rem;border:1px solid #d1d5db;border-radius:.25rem;background-color:#fff}.list-items{margin-bottom:1rem;border:1px solid #e5e7eb;border-radius:.375rem;padding:1rem;background-color:#f9fafb}.list-item{display:flex;align-items:center;margin-bottom:.5rem;gap:.5rem}.list-item input{flex:1 1;margin-bottom:0;padding:.5rem;border:1px solid #d1d5db;border-radius:.25rem}.list-item-remove{background:none;border:none;color:#ef4444;cursor:pointer;font-size:1.25rem;padding:.25rem .5rem;border-radius:.25rem;transition:all .2s}.list-item-remove:hover{background-color:#fee2e2}.add-list-item{background-color:#f3f4f6;border:1px dashed #d1d5db;color:#6b7280;padding:.5rem 1rem;border-radius:.25rem;cursor:pointer;width:100%;text-align:center;margin-top:.5rem;transition:all .2s}.add-list-item:hover{background-color:#e5e7eb;color:#374151}.blockquote-input,.heading-input{border:1px solid #e5e7eb;border-radius:.375rem;padding:1rem;margin-bottom:1rem;background-color:#f9fafb}.blockquote-input label,.heading-input label{display:block;margin-bottom:.5rem;font-weight:500;color:#374151}.blockquote-input textarea,.heading-input input{width:100%;padding:.5rem;border:1px solid #d1d5db;border-radius:.25rem}.add-content-btn,.update-content-btn{background-color:#2563eb;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.375rem;font-weight:500;cursor:pointer;transition:all .2s;margin-top:1rem}.add-content-btn:hover,.update-content-btn:hover{background-color:#1d4ed8}.cancel-edit-btn{background-color:#6b7280;color:#fff;border:none;padding:.75rem 1.5rem;border-radius:.375rem;font-weight:500;cursor:pointer;transition:all .2s;margin-top:1rem;margin-left:.5rem}.cancel-edit-btn:hover{background-color:#4b5563}.form-actions{display:flex;margin-top:1rem}.text-format-toolbar{display:flex;flex-wrap:wrap;gap:1rem;padding:1rem;background-color:#f9fafb;border:1px solid #e5e7eb;border-radius:.375rem;margin-bottom:1rem}.format-group{display:flex;flex-direction:column;min-width:120px}.format-group label{font-size:.875rem;font-weight:500;color:#374151;margin-bottom:.25rem}.format-group select{padding:.375rem .5rem;border:1px solid #d1d5db;border-radius:.25rem;background-color:#fff;font-size:.875rem}.text-align-buttons{display:flex;gap:.25rem}.text-align-button{width:2rem;height:2rem;display:flex;align-items:center;justify-content:center;border:1px solid #d1d5db;border-radius:.25rem;background-color:#fff;cursor:pointer;transition:all .2s}.text-align-button:hover{background-color:#f3f4f6}.text-align-button.active{background-color:#dbeafe;border-color:#3b82f6;color:#2563eb}.content-form{border:1px solid #e5e7eb;border-radius:.375rem;padding:1.5rem;background-color:#fff;margin-bottom:2rem}.content-form h4{margin-top:0;margin-bottom:1rem;color:#374151;font-weight:600}.table-input{margin-bottom:1.5rem}.table-controls{display:flex;gap:.5rem;margin-bottom:1rem}.add-column-btn,.add-row-btn{background-color:#f3f4f6;border:1px solid #d1d5db;color:#374151;padding:.5rem 1rem;border-radius:.25rem;font-size:.875rem;font-weight:500;cursor:pointer;transition:all .2s}.add-column-btn:hover,.add-row-btn:hover{background-color:#e5e7eb}.add-column-btn:disabled,.add-row-btn:disabled{opacity:.5;cursor:not-allowed}.table-container{overflow-x:auto;border:1px solid #e5e7eb;border-radius:.375rem}.table-editor{width:100%;border-collapse:collapse;background-color:#fff}.table-editor td,.table-editor th{padding:.5rem;border:1px solid #e5e7eb}.header-input-container{display:flex;align-items:center}.header-input{flex:1 1;font-weight:600}.cell-input,.header-input{padding:.5rem;border:1px solid #d1d5db;border-radius:.25rem;width:100%;min-width:100px}.remove-column-btn,.remove-row-btn{background:none;border:none;color:#ef4444;cursor:pointer;font-size:1.25rem;padding:.25rem;margin-left:.25rem;border-radius:.25rem;transition:all .2s}.remove-column-btn:hover,.remove-row-btn:hover{background-color:#fee2e2}.remove-column-btn:disabled,.remove-row-btn:disabled{opacity:.5;cursor:not-allowed}.row-actions{border:none;width:40px}.error-message{color:#ef4444;font-size:.875rem;margin-bottom:.5rem;padding:.5rem;background-color:#fee2e2;border-radius:.25rem;border:1px solid #fca5a5}.table-preview-container{margin-top:1.5rem;border:1px solid #e5e7eb;border-radius:.375rem;padding:1rem;background-color:#f9fafb}.preview-title{font-size:.875rem;font-weight:500;color:#6b7280;margin-bottom:.75rem}.table-preview{overflow-x:auto;margin-bottom:.5rem;background-color:#fff;border:1px solid #e5e7eb;border-radius:.25rem;padding:.5rem;width:100%}.table-preview table{width:100%;border-collapse:collapse}.table-preview th{padding:.75rem;border-bottom:2px solid #ddac63;font-weight:600}.table-preview td{padding:.75rem;border-bottom:1px solid #e5e7eb}[style*="text-align: center"]{text-align:center}[style*="text-align: right"]{text-align:right}[style*="text-align: left"]{text-align:left}table[style*="text-align: center"] td,table[style*="text-align: center"] th{text-align:center}table[style*="text-align: right"] td,table[style*="text-align: right"] th{text-align:right}table[style*="text-align: left"] td,table[style*="text-align: left"] th{text-align:left}.content-section-title{font-size:1.125rem;font-weight:500;margin-bottom:1rem;color:var(--dark-color)}.content-subsection-title{font-size:1rem;font-weight:500;margin-bottom:.5rem;color:var(--dark-color)}:root{--primary-color:#00c2cb;--secondary-color:#ddac63;--dark-color:#3a3a44;--border-color:#e5e7eb;--text-color:#2f3640;--muted-color:#6b7280;--background-color:#f5f5f5;--white:#fff;--gray-50:#f9fafb;--gray-100:#f3f4f6;--gray-200:#e5e7eb;--gray-300:#d1d5db;--gray-400:#9ca3af;--gray-500:#6b7280;--gray-600:#4b5563;--gray-700:#374151;--gray-800:#1f2937;--gray-900:#111827;--red-500:#ef4444;--red-100:#fee2e2;--blue-500:#3b82f6;--blue-100:#dbeafe}.app-container{max-width:1400px;margin:0 auto;padding:0 1rem}.main-layout{display:grid;grid-template-columns:1fr;grid-gap:2rem;gap:2rem;margin-bottom:2rem}.form-column{gap:2rem}.form-column,.preview-column{display:flex;flex-direction:column}.preview-card,.template-selection-card{background-color:#fff;border-radius:.5rem;box-shadow:0 1px 3px rgba(0,0,0,.1);padding:1.5rem}.preview-card{position:-webkit-sticky;position:sticky;top:2rem}.preview-container{border:1px solid var(--border-color);border-radius:.5rem;background-color:#fff;overflow-x:auto;padding:0;touch-action:pan-x pinch-zoom;-webkit-overflow-scrolling:touch}.preview-container .container,.preview-container .cover-letter-container{width:650px!important;min-width:650px!important;max-width:650px!important;margin:0 auto;padding:20px;box-sizing:border-box;transform:scale(.9);transform-origin:top center}.preview-container .container div,.preview-container .container h1,.preview-container .container h2,.preview-container .container h3,.preview-container .container p,.preview-container .cover-letter-container div,.preview-container .cover-letter-container h1,.preview-container .cover-letter-container h2,.preview-container .cover-letter-container h3,.preview-container .cover-letter-container p{white-space:pre-wrap!important;word-break:keep-all!important;overflow-wrap:normal!important}.preview-actions-container{margin-top:1.5rem}.template-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));grid-gap:1rem;gap:1rem}.template-card{border:1px solid var(--border-color);border-radius:.5rem;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s}.template-card:hover{transform:translateY(-4px);box-shadow:0 10px 15px -3px rgba(0,0,0,.1)}.template-card.selected{border:2px solid var(--primary-color);box-shadow:0 0 0 2px rgba(0,194,203,.3)}.template-thumbnail{position:relative;padding-top:141%;overflow:hidden}.template-thumbnail-content{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center}.template-title{padding:.75rem;text-align:center;font-weight:500}.custom-file-input{display:flex;align-items:stretch;border-radius:.375rem;overflow:hidden;border:1px solid var(--gray-300);margin-bottom:.5rem;position:relative}.hidden-file-input{position:absolute;width:.1px;height:.1px;opacity:0;overflow:hidden;z-index:-1}.file-upload-button{display:inline-flex;align-items:center;justify-content:center;padding:.75rem 1.25rem;background-color:var(--primary-color);color:#fff;font-size:.875rem;font-weight:500;cursor:pointer;transition:background-color .2s;white-space:nowrap;border:none}.file-upload-button:hover{background-color:#00adb5}.file-upload-filename{flex:1 1;padding:.75rem 1rem;background-color:#fff;color:var(--gray-700);font-size:.875rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:none}.file-upload-remove{display:flex;align-items:center;justify-content:center;padding:0 .75rem;background-color:#fff;color:var(--red-500);cursor:pointer;transition:background-color .2s,color .2s;border:none}.file-upload-remove:hover{background-color:var(--red-100)}.button-selector-container{display:flex;flex-direction:column;gap:.5rem}.button-selector-label{font-size:.875rem;font-weight:500;color:var(--gray-700)}.button-selector-wrapper{position:relative}.button-selector{padding:.75rem 2.5rem .75rem .75rem;border:1px solid var(--gray-300);border-radius:.375rem;background-color:#fff;font-size:.875rem;color:var(--gray-900);-webkit-appearance:none;-moz-appearance:none;appearance:none;cursor:pointer;transition:border-color .15s,box-shadow .15s}.button-selector:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(0,194,203,.1)}.button-selector-icon{position:absolute;right:.75rem;top:50%;transform:translateY(-50%);color:var(--gray-500);pointer-events:none}.preview-actions{display:flex;gap:1rem}.btn,.preview-actions{justify-content:center}.btn{display:inline-flex;align-items:center;padding:.75rem 1.5rem;font-size:.875rem;font-weight:500;border-radius:.375rem;cursor:pointer;transition:all .2s;border:none}.btn-primary{background-color:var(--primary-color);color:#fff}.btn-primary:hover{background-color:#00a5ad}.btn-secondary{background-color:var(--dark-color);color:#fff}.btn-secondary:hover{background-color:#2d2d35}.btn-outline{background-color:transparent;border:1px solid var(--border-color);color:var(--gray-700)}.btn-outline:hover{background-color:var(--gray-50)}.preview-action-export{background-color:var(--gray-800);color:#fff}.preview-action-export:hover{background-color:var(--gray-900)}.preview-action-print{background-color:var(--primary-color);color:#fff}.preview-action-print:hover{background-color:#00b0b8}nav{background-color:#fff;border-bottom:1px solid var(--gray-200);padding:1rem 0;box-shadow:0 1px 3px rgba(0,0,0,.1)}.nav-container{display:flex;justify-content:space-between;align-items:center;max-width:1400px;margin:0 auto;padding:0 1rem}.nav-logo{font-size:1.25rem;font-weight:700;color:var(--primary-color);text-decoration:none}.nav-links{display:flex;gap:1.5rem}.nav-link{color:var(--dark-color);text-decoration:none;transition:color .2s}.nav-link:hover{color:var(--primary-color)}footer{background-color:var(--dark-color);color:#fff;padding:2rem 0;margin-top:auto}.footer-container{max-width:1400px;margin:0 auto;padding:0 1rem}.footer-content{display:flex;flex-direction:column;align-items:center;gap:1.5rem}.footer-logo{font-size:1.25rem;font-weight:600;color:var(--primary-color)}.footer-links{display:flex;gap:1.5rem}.footer-link{color:var(--gray-300);text-decoration:none;transition:color .2s}.footer-link:hover{color:var(--primary-color)}.footer-copyright{margin-top:1.5rem;text-align:center;color:var(--gray-400);font-size:.875rem}.tabs{display:flex;border-bottom:1px solid var(--border-color);margin-bottom:1.5rem}.tab-button{padding:.75rem 1.25rem;font-size:.875rem;font-weight:500;color:var(--gray-500);border:none;border-bottom:2px solid transparent;background:none;cursor:pointer;transition:all .2s}.tab-button.active,.tab-button:hover{color:var(--primary-color)}.tab-button.active{border-bottom-color:var(--primary-color)}@media print{@page{size:A4;margin:15mm}body{background:#fff;margin:0;padding:0;-webkit-print-color-adjust:exact;print-color-adjust:exact}body *{visibility:hidden}.preview-container,.preview-container *{visibility:visible}.preview-container{position:absolute;left:0;top:0;width:100%;background:#fff;box-shadow:none;padding:0;margin:0}.preview-actions,.print-hide{display:none!important}.contact-card,.signature-section{page-break-inside:avoid}}.char-count{font-weight:400;color:var(--gray-500);margin-left:.25rem}.min-h-screen,body,html{overflow-x:hidden}.preview-wrapper{overflow:visible;touch-action:manipulation}@media (min-width:640px){.app-container{padding:0 1.5rem}.template-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:768px){.app-container{padding:0 2rem}.footer-content{flex-direction:row;justify-content:space-between}}@media (min-width:1024px){.app-container{padding:0 2.5rem}.main-layout{grid-template-columns:5fr 7fr}.template-grid{grid-template-columns:repeat(3,1fr)}}@media (min-width:1280px){.app-container{padding:0 3rem}}@media (max-width:768px){.app-container,.form-column,.main-layout,.min-h-screen,.preview-column,body,html{overflow-x:hidden}.preview-container{overflow-x:auto;touch-action:manipulation}.preview-container .container,.preview-container .cover-letter-container{transform:none;margin:0 auto}a,button,div,h1,h2,h3,input,label,p,select,span,textarea{white-space:normal}}.preview-container .container .buttons,.preview-container .cover-letter-container .buttons{display:flex;flex-wrap:wrap}.preview-container .container .primary-button,.preview-container .container .secondary-button,.preview-container .cover-letter-container .primary-button,.preview-container .cover-letter-container .secondary-button{white-space:nowrap;margin-bottom:8px}.preview-container .container .contact-card,.preview-container .cover-letter-container .contact-card{box-sizing:border-box}