*{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:600px;margin:0 auto}.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}.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}.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{background-color:#fff;border-radius:12px;padding:32px;box-shadow:0 2px 8px #00000014;text-align:left}.image-preview h2{font-size:20px;font-weight:700;margin-bottom:20px;color:#333}.image-container{width:100%;margin-bottom:24px;border:1px solid #e0e0e0;border-radius:8px;padding:12px;background-color:#fff;overflow:hidden}.image-container img{width:100%;height:auto;display:block;max-height:500px;object-fit:contain}.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:24px;padding-top:24px;border-top:1px solid #f0f0f0}.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}.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%}}@media (max-width: 500px){.app{padding:10px}.image-container img{max-height:300px}}