@import"https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap";:root{--primary-color: #4f46e5;--primary-hover: #4338ca;--background-color: #f3f4f6;--card-background: #ffffff;--text-color: #1f2937;--subtle-text-color: #6b7280;--border-color: #d1d5db;--error-color: #dc2626;--success-color: #16a34a}*{box-sizing:border-box;margin:0;padding:0}body{font-family:Inter,sans-serif;background-color:var(--background-color);color:var(--text-color);display:flex;justify-content:center;align-items:flex-start;min-height:100vh;padding:2rem 1rem}#root{width:100%;max-width:650px}.container{background-color:var(--card-background);border-radius:.75rem;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;padding:2rem 2.5rem 2.5rem;text-align:center;border:1px solid var(--border-color);transition:all .3s ease}.header-bar{display:flex;justify-content:space-between;align-items:center;margin:-2rem -2.5rem 0;padding-left:1.5rem;border-bottom:1px solid var(--border-color)}.app-title{font-size:1.1rem;font-weight:600;color:var(--text-color)}.header-actions{display:flex;align-items:center}.header-button,.logout-button{background:none;border:none;color:var(--subtle-text-color);cursor:pointer;font-size:.9rem;font-weight:500;padding:1rem 1.5rem;transition:color .2s}.header-button:hover,.logout-button:hover{color:var(--primary-color)}h1{font-size:1.875rem;font-weight:600;margin-bottom:.5rem}p{color:var(--subtle-text-color);margin-bottom:2rem;font-size:1rem;line-height:1.5}.upload-area{margin-bottom:1.5rem}.upload-button{display:inline-block;background-color:var(--primary-color);color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-weight:500;cursor:pointer;transition:background-color .2s ease-in-out;border:none;font-size:1rem}.upload-button:hover{background-color:var(--primary-hover)}.upload-button:disabled{background-color:#9ca3af;cursor:not-allowed}input[type=file]{display:none}.loader-container{display:flex;justify-content:center;align-items:center;flex-direction:column;gap:1rem;padding:1rem;min-height:150px}.loader{border:4px solid rgba(0,0,0,.1);width:36px;height:36px;border-radius:50%;border-left-color:var(--primary-color);animation:spin 1s ease infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.processing-text{color:var(--subtle-text-color);font-weight:500;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.download-button{width:100%;background-color:var(--success-color);color:#fff;padding:.75rem 1.5rem;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;border:none;transition:background-color .2s ease-in-out;margin-top:1rem}.download-button:hover{background-color:#15803d}.download-button:disabled{background-color:#9ca3af;cursor:not-allowed}.error{color:var(--error-color);background-color:#fef2f2;border:1px solid #fecaca;padding:.75rem;border-radius:.5rem;margin-top:1.5rem;text-align:left}.success{color:var(--success-color);background-color:#f0fdf4;border:1px solid #bbf7d0;padding:.75rem;border-radius:.5rem;margin-top:1.5rem;text-align:center}.login-container h1{margin-bottom:.5rem}.login-container p{margin-bottom:2rem}.login-form{display:flex;flex-direction:column;gap:1.25rem;text-align:left}.input-group{display:flex;flex-direction:column}.input-group label{margin-bottom:.5rem;font-weight:500;color:var(--text-color)}.input-group input{padding:.75rem;border:1px solid var(--border-color);border-radius:.5rem;font-size:1rem;font-family:Inter,sans-serif;transition:border-color .2s,box-shadow .2s}.input-group input:focus{outline:none;border-color:var(--primary-color);box-shadow:0 0 0 3px #4f46e533}.login-button{background-color:var(--primary-color);color:#fff;padding:.85rem;border:none;border-radius:.5rem;font-size:1rem;font-weight:500;cursor:pointer;transition:background-color .2s;margin-top:.5rem}.login-button:hover{background-color:var(--primary-hover)}.design-options{text-align:left;padding-top:1rem}.design-options h2{font-size:1.25rem;font-weight:600;margin-bottom:1.5rem;text-align:center}.options-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;align-items:center}.option-group{display:flex;flex-direction:column;gap:.5rem}.option-group label{font-weight:500;color:var(--text-color)}.option-group select,.option-group input[type=color]{width:100%;padding:.5rem;border-radius:.375rem;border:1px solid var(--border-color);font-size:1rem}.option-group input[type=color]{height:40px;padding:5px}.logo-upload{grid-column:1 / -1;display:flex;align-items:center;gap:1rem}.logo-upload-button{background:#f9fafb;border:1px solid var(--border-color);color:var(--text-color)}.logo-upload-button:hover{background:#f3f4f6}.logo-preview{width:40px;height:40px;object-fit:cover;border-radius:.25rem;border:1px solid var(--border-color)}.remove-logo-button{background:none;border:none;color:var(--error-color);cursor:pointer;font-size:.875rem;font-weight:500}.toggle-group{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:center;background-color:#f9fafb;padding:.75rem;border-radius:.5rem}.toggle-switch{position:relative;display:inline-block;width:50px;height:28px}.toggle-switch input{opacity:0;width:0;height:0}.toggle-switch-slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background-color:#ccc;transition:.4s;border-radius:34px}.toggle-switch-slider:before{position:absolute;content:"";height:20px;width:20px;left:4px;bottom:4px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.toggle-switch-slider{background-color:var(--primary-color)}input:checked+.toggle-switch-slider:before{transform:translate(22px)}.generate-controls{margin-top:2rem;padding:1.5rem;background-color:#f9fafb;border:1px solid var(--border-color);border-radius:.5rem}.generate-controls p{margin-bottom:1rem;color:var(--text-color)}.generate-controls p strong{color:var(--primary-color)}.reset-button{margin-top:1rem;background:none;border:none;color:var(--primary-color);cursor:pointer;font-weight:500;font-size:1rem}.reset-button:hover{text-decoration:underline}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#11182799;display:flex;justify-content:center;align-items:center;z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.modal-content{background-color:var(--card-background);padding:2.5rem;border-radius:.75rem;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;width:100%;max-width:450px;position:relative}.modal-content h2{margin-bottom:2rem;font-size:1.5rem;font-weight:600;text-align:center;color:var(--text-color)}.close-button{position:absolute;top:1rem;right:1rem;background:none;border:none;font-size:1.75rem;line-height:1;cursor:pointer;color:var(--subtle-text-color);padding:.25rem}.close-button:hover{color:var(--text-color)}.modal-content.server-guide{max-width:700px;text-align:left}.server-guide h2{text-align:left;margin-bottom:.5rem}.server-guide h3{font-size:1.125rem;font-weight:600;margin-top:1.5rem;margin-bottom:.75rem;color:var(--primary-color);padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.server-guide p,.server-guide li{font-size:.95rem;line-height:1.6;color:var(--text-color);margin-bottom:1rem}.server-guide .guide-intro{font-size:1rem;color:var(--subtle-text-color);margin-bottom:1.5rem}.server-guide ol,.server-guide ul{padding-left:1.5rem}.server-guide code{font-family:Courier New,Courier,monospace;background-color:#f3f4f6;padding:.15rem .4rem;border-radius:.25rem;font-size:.9rem;color:#374151}.server-guide pre{background-color:#1f2937;color:#d1d5db;padding:1rem;border-radius:.5rem;overflow-x:auto;font-size:.875rem;white-space:pre-wrap;margin-top:1rem}.server-guide pre code{background:none;padding:0;color:inherit}.server-guide ul li{margin-bottom:.75rem}