*,*:before,*:after{box-sizing:border-box}body,h1,h2,h3,h4,h5,h6,p,ul,ol,li,figure,figcaption,blockquote,dl,dd{margin:0;padding:0}ul,ol{list-style:none}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}:root{font-family:Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light;background-color:#f4f7f6;color:#333;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.wanghong-container{max-width:860px;margin:2rem auto;padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 10px #0000001a;font-family:Arial,sans-serif;color:#333}h1{text-align:center;color:#5d3fd3;margin-bottom:.5rem}.wanghong-description{text-align:center;color:#666;font-size:1rem;margin-bottom:2rem}.section-description{color:#777;font-size:.95rem;margin-bottom:1.5rem}.section.instructions p,.section.tips ul{font-size:.85rem;line-height:1.3;margin-bottom:.5rem}.section.tips ul{list-style:disc inside;padding-left:1rem}.section.tips li{margin-bottom:.3rem}.section.instructions h2,.section.tips h2{font-size:1.2rem}.section.tips{margin-top:2rem}h2{color:#4a4a4a;border-bottom:1px solid #eee;padding-bottom:.5rem;margin-top:1.5rem;margin-bottom:.5rem}.section{margin-bottom:2rem}.outfit-selection{display:grid;grid-template-columns:repeat(auto-fit,minmax(350px,1fr));gap:1rem;margin-bottom:1rem}.outfit-thumbnail{height:auto;border:2px solid #ccc;border-radius:8px;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;align-items:center;text-align:center;transition:all .3s ease;background-color:#f9f9f9;padding-bottom:.5rem}.outfit-thumbnail img{width:100%;aspect-ratio:1 / 1;object-fit:cover;border-radius:6px;flex-shrink:0}.outfit-thumbnail p{margin-top:.5rem;font-size:1.1rem;color:#333;font-weight:700;padding:0 .5rem}.outfit-thumbnail:hover{border-color:#a0a0a0;box-shadow:0 2px 8px #0000001a}.outfit-thumbnail.selected{border-color:#5d3fd3;box-shadow:0 0 0 3px #5d3fd3}.selection-info{font-size:.95rem;color:#666;margin-top:.5rem}.selection-info span{font-weight:700;color:#5d3fd3}.file-input{display:none}.drop-area{width:100%;max-width:350px;aspect-ratio:1 / 1;border:2px dashed #ccc;border-radius:8px;text-align:center;cursor:pointer;transition:all .3s ease;background-color:#f9f9f9;display:flex;justify-content:center;align-items:center;margin:0 auto;overflow:hidden}.drop-area:hover{border-color:#a0a0a0;background-color:#f0f0f0}.drop-area.dragging{border-color:#5d3fd3;background-color:#e6e0ff;box-shadow:0 0 0 3px #5d3fd34d}.drop-area.disabled{cursor:not-allowed;background-color:#f5f5f5;opacity:.7;border-color:#e0e0e0}.drop-area.disabled label{cursor:not-allowed}.drop-area label{display:flex;flex-direction:column;justify-content:center;align-items:center;width:100%;height:100%;cursor:pointer;color:#555;font-size:1.1rem}.drop-area label p{margin:0;padding:0;margin-top:1rem}.upload-icon{color:#5d3fd3;width:60px;height:60px}.uploaded-preview-image{width:100%;height:100%;border-radius:4px;object-fit:cover}.image-preview{margin-top:1rem;text-align:center;border:1px dashed #ccc;padding:1rem;border-radius:8px}.image-preview img{max-width:100%;height:auto;border-radius:4px}.generate-button{display:block;width:100%;max-width:350px;margin:0 auto;padding:1rem 1.5rem;background-color:#5d3fd3;color:#fff;border:none;border-radius:6px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:background-color .3s ease}.generate-button:hover:not(:disabled){background-color:#4a2fbf}.generate-button:disabled{background-color:#ccc;cursor:not-allowed}.error-message{color:#d32f2f;background-color:#ffebee;border:1px solid #ef9a9a;padding:.75rem;margin-top:1rem;border-radius:4px;text-align:center;font-size:.9rem}.generated-image-section{text-align:center;margin-top:2rem}.generated-image{max-width:100%;height:auto;border:1px solid #ddd;border-radius:8px;box-shadow:0 2px 5px #0000000d}.loading-view,.result-view{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:2rem;min-height:400px}.uploaded-preview-image-loading{max-width:250px;border-radius:8px;margin-bottom:1.5rem;box-shadow:0 4px 10px #0000001a}.loading-view p{font-size:1.2rem;color:#5d3fd3;font-weight:700}.download-button,.restart-button{display:block;width:100%;max-width:300px;padding:1rem 1.5rem;border:none;border-radius:6px;font-size:1.1rem;font-weight:700;cursor:pointer;transition:all .3s ease;margin-top:1rem}.download-button{background-color:#5d3fd3;color:#fff}.download-button:hover{background-color:#4a2fbf}.restart-button{background-color:#f0f0f0;color:#333;border:1px solid #ccc}.restart-button:hover{background-color:#e0e0e0}@media(max-width:800px){.outfit-selection{grid-template-columns:1fr}}@media(max-width:768px){.wanghong-container{padding:1rem;margin:1rem auto}h1{font-size:1.8rem}h2{font-size:1.3rem}.wanghong-description,.section-description{font-size:.9rem}.outfit-thumbnail p{font-size:1rem}.drop-area,.generate-button{max-width:100%}}.about-container{padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 10px #0000001a;max-width:800px;margin:2rem auto;text-align:left}.about-container h1,.about-container h2{color:#5d3fd3;border-bottom:2px solid #eee;padding-bottom:.5rem;margin-bottom:1rem}.about-container p{font-size:1.1rem;line-height:1.6;color:#555;margin-bottom:1.5rem}.about-container a{color:#5d3fd3;font-weight:700}.about-container a:hover{text-decoration:underline}.about-container section{margin-top:2rem}.privacy-container{padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 10px #0000001a;max-width:800px;margin:2rem auto;text-align:left}.privacy-container h1,.privacy-container h2{color:#5d3fd3;border-bottom:2px solid #eee;padding-bottom:.5rem;margin-bottom:1rem}.privacy-container p,.privacy-container li{font-size:1rem;line-height:1.6;color:#555}.privacy-container ul{list-style-position:inside;padding-left:0;margin-bottom:1.5rem}.privacy-container a{color:#5d3fd3;font-weight:700}.privacy-container a:hover{text-decoration:underline}.privacy-container section{margin-top:2rem}.privacy-container em{font-style:italic;color:#777}body{margin:0;font-family:Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;background-color:#f4f7f6;color:#333;min-height:100vh}#root{max-width:1280px;margin:0 auto;padding:0;text-align:center}h1,h2,h3,h4,h5,h6{color:#5d3fd3;margin-top:0;margin-bottom:1rem}a{color:#5d3fd3;text-decoration:none;transition:color .3s ease}a:hover{color:#4a2fbf}header{background-color:#5d3fd3;padding:1rem 0;box-shadow:0 2px 4px #0000001a;position:relative;z-index:1000;border-bottom:1px solid #eee}nav ul{list-style:none;padding:0;margin:0;display:flex;justify-content:center;align-items:center;gap:2rem}nav li{position:relative}nav li a,.dropdown-toggle{color:#fff;font-weight:700;font-size:1.1rem;padding:.5rem 1rem;border-radius:4px;background-color:transparent;border:none;cursor:pointer;transition:background-color .3s ease}nav li a:hover,.dropdown-toggle:hover{background-color:#fff3;color:#fff}.dropdown-menu{position:absolute;top:100%;left:50%;transform:translate(-50%);background-color:#5d3fd3;list-style:none;padding:.5rem 0;margin:0;border-radius:4px;box-shadow:0 4px 8px #0003;min-width:180px;text-align:center}.dropdown-menu li{padding:0;margin:0}.dropdown-menu li a{display:block;padding:.75rem 1rem;color:#fff;font-weight:400;font-size:1rem;white-space:nowrap}.dropdown-menu li a:hover{background-color:#ffffff4d}main{margin-top:2rem}footer{margin-top:4rem;padding:1.5rem 0;background-color:#5d3fd3;color:#fff;text-align:center;box-shadow:0 -2px 4px #0000001a}footer p{margin:0;font-size:.9rem}.footer-links{margin-bottom:1rem}.footer-links a{color:#fff;text-decoration:none;margin:0 .5rem;font-size:.9rem}.footer-links a:hover{text-decoration:underline}.home-container{padding:2rem;background-color:#fff;border-radius:8px;box-shadow:0 4px 10px #0000001a;max-width:600px;margin:2rem auto}.home-container h1{font-size:2.5rem;color:#5d3fd3}.home-container p{font-size:1.1rem;line-height:1.6;color:#555}.home-container .link-button{display:inline-block;margin-top:1.5rem;padding:.8rem 1.5rem;background-color:#5d3fd3;color:#fff;border-radius:5px;font-weight:700;transition:background-color .3s ease}.home-container .link-button:hover{background-color:#4a2fbf}.home-features{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid #eee;text-align:left}.home-features h2{font-size:1.8rem;text-align:center;margin-bottom:1.5rem}.home-features ul{list-style:none;padding:0}.home-features li{font-size:1.1rem;color:#555;margin-bottom:.75rem;position:relative;padding-left:1.5rem}.home-features li strong{color:#5d3fd3}.home-features li:before{content:"✔";color:#5d3fd3;position:absolute;left:0;top:0}@media(max-width:768px){body{padding:0 1rem}h1,.home-container h1{font-size:2rem}h2,.home-features h2{font-size:1.5rem}nav ul{gap:1rem}nav li a,.dropdown-toggle{font-size:1rem;padding:.5rem}.home-container{padding:1.5rem;margin:1rem auto}}