*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f5f5f5;color:#333}.app{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px;background-color:#f5f5f5}.container{width:100%;max-width:1280px;margin:0 auto;padding:0 24px}@media (max-width: 768px){.container{max-width:600px;padding:0 10px}}.prompt-input{background-color:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px #00000014;text-align:left}.prompt-input h1{font-size:24px;font-weight:700;margin-bottom:8px;color:#333}.prompt-input .subtitle{font-size:14px;color:#666;margin-bottom:24px;line-height:1.5}@media (min-width: 769px){.prompt-input-inner.prompt-input-wide{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:start}.prompt-input-left{display:flex;justify-content:center;align-items:flex-start}.prompt-input-left .preview-example{margin-bottom:0;width:100%}.prompt-input-left .preview-example-image{max-height:400px}.prompt-input-right .subtitle{margin-bottom:24px}}@media (max-width: 768px){.prompt-input-inner.prompt-input-wide{display:block}.prompt-input-left{margin-bottom:24px}}.preview-example{display:flex;flex-direction:column;align-items:center;gap:8px;margin-bottom:32px;padding:16px;background-color:#f9f9f9;border-radius:8px;border:1px solid #e8e8e8}.preview-example-image{max-width:100%;max-height:350px;width:auto;height:auto;object-fit:contain;border-radius:6px;box-shadow:0 2px 8px #0000001a}.preview-example-text{font-size:12px;color:#999;margin:0;font-style:italic}.prompt-input form{display:flex;flex-direction:column;gap:16px}.prompt-input textarea{width:100%;padding:16px;border:1px solid #e0e0e0;border-radius:8px;font-size:14px;font-family:inherit;resize:vertical;background-color:#fff;color:#333;outline:none;transition:border-color .2s;line-height:1.5}.prompt-input textarea:focus{border-color:#268068}.prompt-input textarea:disabled{background-color:#f5f5f5;cursor:not-allowed}.prompt-input textarea::placeholder{color:#999}.generate-section,.upload-section{display:flex;flex-direction:column;gap:12px}.divider{display:flex;align-items:center;text-align:center;margin:20px 0;position:relative}.divider:before,.divider:after{content:"";flex:1;height:1px;background-color:#e0e0e0}.divider span{padding:0 16px;font-size:14px;color:#999;background-color:#fff}.file-selected{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;background-color:#f5f5f5;border-radius:6px;margin-top:8px}.file-selected .file-name{flex:1;font-size:13px;color:#333;margin:0;word-break:break-all}.btn-clear-file{background:none;border:none;color:#666;font-size:20px;line-height:1;cursor:pointer;padding:0;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.btn-clear-file:hover:not(:disabled){background-color:#e0e0e0;color:#333}.btn-clear-file:disabled{opacity:.5;cursor:not-allowed}.btn-primary,.btn-secondary,.btn-copy{padding:12px 24px;font-size:14px;font-weight:600;border:none;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}.btn-primary{background-color:#268068;color:#fff}.btn-primary:hover:not(:disabled){background-color:#1f6b56;transform:translateY(-1px);box-shadow:0 4px 12px #2680684d}.btn-primary:disabled{background-color:#ccc;cursor:not-allowed;opacity:.6}.btn-secondary{background-color:#fff;color:#333;border:1px solid #e0e0e0}.btn-secondary:hover:not(:disabled){background-color:#f9f9f9;border-color:#d0d0d0}.btn-download{background-color:#fff;color:#268068;border:1px solid #268068;padding:12px 24px;font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}.btn-download:hover:not(:disabled){background-color:#268068;color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #2680684d}.btn-download:disabled{opacity:.6;cursor:not-allowed}.btn-copy{background-color:#f5f5f5;color:#268068;border:1px solid #e0e0e0;padding:8px 16px;font-size:13px;font-weight:500}.btn-copy:hover{background-color:#e8f5f0;border-color:#268068}.btn-secondary:disabled{opacity:.6;cursor:not-allowed}.image-preview,.logo-preview{background-color:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px #00000014;text-align:left}.image-preview h2,.logo-preview h2{font-size:20px;font-weight:700;margin-bottom:24px;color:#333}.image-container{width:100%;margin-bottom:24px;border:1px solid #e0e0e0;border-radius:8px;padding:12px;background-color:#fff;overflow:hidden;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.image-container img{width:100%;height:auto;display:block;max-height:500px;object-fit:contain}.customer-text-input{margin-top:24px;margin-bottom:16px}.customer-text-input label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.customer-text-input textarea{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#333;background-color:#fff;resize:vertical;min-height:80px;transition:border-color .2s}.customer-text-input textarea:focus{outline:none;border-color:#268068}.customer-text-input textarea:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}.customer-text-input textarea::placeholder{color:#999}.text-hint{font-size:12px;color:#666;margin-top:8px;line-height:1.5}.modify-logo-section{margin-bottom:24px}.modify-logo-section h3{font-size:16px;font-weight:600;color:#268068;margin-bottom:12px}.modify-logo-input{display:flex;flex-direction:column;gap:12px}.modify-logo-input label{display:block;font-size:14px;font-weight:600;color:#333;margin-bottom:8px}.modify-logo-input textarea{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#333;background-color:#fff;resize:vertical;min-height:80px;transition:border-color .2s}.modify-logo-input textarea:focus{outline:none;border-color:#268068}.modify-logo-input textarea:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}.modify-logo-input textarea::placeholder{color:#999}.modify-actions{display:flex;gap:12px;justify-content:flex-end}.color-selection{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:24px}.color-select-group{display:flex;flex-direction:column;gap:8px}.color-select-group label{font-size:14px;font-weight:600;color:#333}.color-select{width:100%;padding:12px;border:1px solid #e0e0e0;border-radius:8px;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;font-size:14px;color:#333;background-color:#fff;cursor:pointer;transition:border-color .2s}.color-select:focus{outline:none;border-color:#268068}.color-select:disabled{background-color:#f5f5f5;cursor:not-allowed;opacity:.6}.accessories-section{margin-bottom:24px}.accessories-section h3{font-size:16px;font-weight:600;color:#268068;margin-bottom:12px}.accessories-checkboxes{display:flex;flex-direction:column;gap:12px}.checkbox-label{display:flex;align-items:center;gap:10px;font-size:14px;color:#333;cursor:pointer}.checkbox-label input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#268068}.checkbox-label input[type=checkbox]:disabled{cursor:not-allowed;opacity:.6}.checkbox-label span{-webkit-user-select:none;user-select:none}@media (max-width: 500px){.color-selection{grid-template-columns:1fr}}.preview-container{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.logo-side,.preview-side{display:flex;flex-direction:column;gap:12px}.logo-side h3,.preview-side h3{font-size:16px;font-weight:600;color:#333;margin:0}@media (max-width: 768px){.preview-container{grid-template-columns:1fr}}.actions{display:flex;gap:12px;justify-content:space-between;align-items:center;margin-top:24px;padding-top:24px;border-top:1px solid #f0f0f0;flex-wrap:wrap}.actions-primary{display:flex;gap:12px;align-items:center}.code-display{background-color:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px #00000014;text-align:left}.code-display h2{font-size:24px;font-weight:700;margin-bottom:24px;color:#333}.code-box{border:1px solid #e0e0e0;border-radius:8px;padding:24px;margin-bottom:20px;background-color:#f9f9f9}.code-label{font-size:12px;text-transform:uppercase;letter-spacing:1px;margin-bottom:12px;color:#666;font-weight:600}.code-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}.code-value{font-size:28px;font-weight:700;letter-spacing:2px;color:#268068;font-family:Inter,monospace;flex:1;min-width:150px}.code-info{font-size:14px;color:#666;margin-bottom:24px;line-height:1.6}.loading-spinner{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px;gap:16px;z-index:1000;background-color:#fffffff2;border-radius:12px;box-shadow:0 4px 20px #00000026}.spinner{width:40px;height:40px;border:3px solid #f0f0f0;border-top:3px solid #268068;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.loading-spinner p{font-size:14px;color:#666}.image-modal{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000e6;display:flex;align-items:center;justify-content:center;z-index:10000;padding:20px;cursor:pointer}.image-modal-content{position:relative;max-width:90vw;max-height:90vh;display:flex;align-items:center;justify-content:center;cursor:default;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px;border-radius:8px;padding:20px}.image-modal-content img{max-width:100%;max-height:90vh;object-fit:contain;border-radius:8px}.image-modal-close{position:absolute;top:-40px;right:0;background:none;border:none;color:#fff;font-size:32px;line-height:1;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.image-modal-close:hover{background-color:#ffffff1a}.image-container img{transition:opacity .2s}.image-container img:hover{opacity:.9}.error{background-color:#fff;border-radius:12px;padding:24px;border:1px solid #e0e0e0;box-shadow:0 2px 8px #00000014;text-align:left}.error p{color:#333;margin-bottom:16px;font-size:14px}@media (max-width: 600px){.container{padding:0 10px}.prompt-input h1{font-size:20px}.code-value{font-size:24px}.actions{flex-direction:column}.actions button{width:100%}.code-row{flex-direction:column;align-items:stretch}.code-value{text-align:center}.btn-copy{width:100%}.mode-button{padding:16px;gap:12px}.mode-button-icon{width:40px;height:40px}.mode-button-title{font-size:15px}.mode-button-description{font-size:12px}.preview-example{margin-bottom:24px;padding:12px}.preview-example-image{max-height:220px}.preview-example-text{font-size:11px}}.mode-selection{display:flex;flex-direction:column;gap:16px;margin-top:8px}.mode-button{display:flex;align-items:center;gap:16px;padding:20px 24px;border:2px solid #e0e0e0;border-radius:12px;background-color:#fff;cursor:pointer;transition:all .2s;text-align:left;font-family:inherit;width:100%}.mode-button:hover:not(:disabled){border-color:#268068;background-color:#f8fffe;transform:translateY(-2px);box-shadow:0 4px 12px #26806826}.mode-button:disabled{opacity:.6;cursor:not-allowed}.mode-button-icon{flex-shrink:0;width:48px;height:48px;display:flex;align-items:center;justify-content:center;background-color:#f5f5f5;border-radius:10px;color:#268068;transition:all .2s}.mode-button:hover:not(:disabled) .mode-button-icon{background-color:#e8f5f0;transform:scale(1.05)}.mode-button-content{display:flex;flex-direction:column;gap:4px;flex:1}.mode-button-title{font-size:16px;font-weight:600;color:#333}.mode-button-description{font-size:13px;color:#666;line-height:1.4}.mode-button-generate,.mode-button-upload{border-color:#e0e0e0}.btn-back{background:none;border:none;color:#666;font-size:14px;font-weight:500;cursor:pointer;padding:8px 0;margin-bottom:12px;transition:color .2s;font-family:inherit;text-align:left}.btn-back:hover:not(:disabled){color:#268068}.btn-back:disabled{opacity:.5;cursor:not-allowed}.file-upload-area{display:flex;flex-direction:column;gap:12px}.file-upload-label{display:inline-block;padding:12px 24px;font-size:14px;font-weight:600;color:#268068;background-color:#fff;border:2px dashed #268068;border-radius:8px;cursor:pointer;text-align:center;transition:all .2s;font-family:inherit}.file-upload-label:hover{background-color:#e8f5f0;border-color:#1f6b56}.file-name{font-size:13px;color:#666;margin:0;padding:8px 12px;background-color:#f9f9f9;border-radius:6px}.file-preview{width:100%;margin-bottom:16px;border:1px solid #e0e0e0;border-radius:8px;padding:12px;background-color:#fff;overflow:hidden;background-image:linear-gradient(45deg,#f0f0f0 25%,transparent 25%),linear-gradient(-45deg,#f0f0f0 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f0f0f0 75%),linear-gradient(-45deg,transparent 75%,#f0f0f0 75%);background-size:20px 20px;background-position:0 0,0 10px,10px -10px,-10px 0px}.file-preview img{width:100%;height:auto;display:block;max-height:300px;object-fit:contain}.upload-error{padding:12px;background-color:#fff3cd;border:1px solid #ffc107;border-radius:8px;margin-bottom:16px}.upload-error p{color:#856404;font-size:13px;margin:0}.btn-tertiary{background-color:#fff;color:#666;border:1px solid #e0e0e0;padding:12px 24px;font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s;font-family:inherit}.btn-tertiary:hover:not(:disabled){background-color:#f9f9f9;border-color:#d0d0d0}.btn-tertiary:disabled{opacity:.6;cursor:not-allowed}@media (max-width: 500px){.app{padding:10px}.image-container img{max-height:300px}.file-preview img{max-height:200px}}