*{box-sizing:border-box}body{margin:0;background:#070b0e;color:#f7f3e8;font-family:system-ui,-apple-system,sans-serif}.app{max-width:600px;margin:auto;min-height:100vh;background:#0c1318;padding-bottom:40px}header{padding:18px;text-align:center;border-bottom:1px solid #29333a}.logo{font-family:Georgia,serif;color:#e7bd5b;font-weight:800;letter-spacing:1px}header small{font-size:9px;color:#78838a;letter-spacing:2px}.hero{padding:28px 18px 12px}.hero h1{font:700 38px/1.02 Georgia,serif;margin:0 0 12px}.hero p{color:#9aa4aa;line-height:1.5}.card{margin:12px 16px;padding:15px;background:#121b21;border:1px solid #29363e;border-radius:16px}.step{display:flex;gap:10px;align-items:center;margin-bottom:12px}.step>b{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e7bd5b;color:#111}.step strong,.step small{display:block}.step small{color:#818d94;margin-top:2px}.upload{min-height:220px;border:1px dashed #55636c;border-radius:13px;display:grid;place-items:center;text-align:center;overflow:hidden;padding:12px}.upload img{width:100%;height:260px;object-fit:contain;background:#080c0f;border-radius:9px}.big{font-size:48px;color:#e7bd5b}.row{display:flex;gap:8px;justify-content:center}.row button,.garment,.generate{border:0;border-radius:24px;padding:12px 15px;background:#e7bd5b;color:#111;font-weight:750}.secondary{background:transparent!important;color:#eee!important;border:1px solid #65727a!important}.garments{display:grid;grid-template-columns:1fr 1fr;gap:8px}.garment{border-radius:10px;background:#0d151a;color:#bfc6ca;border:1px solid #36434b}.garment.active{border-color:#e7bd5b;color:#e7bd5b}.generate{display:block;width:calc(100% - 32px);margin:18px 16px;font-size:15px;padding:16px}.generate:disabled{opacity:.4}#status{text-align:center;color:#e7bd5b;padding:0 18px;min-height:22px;font-size:13px}.compare{display:grid;grid-template-columns:1fr 1fr;gap:8px}.compare div{position:relative}.compare img{width:100%;height:340px;object-fit:cover;border-radius:10px}.compare small{position:absolute;bottom:0;left:0;right:0;background:#000a;padding:8px;text-align:center}.result h2{font-family:Georgia,serif}.note{font-size:10px;color:#78838a;line-height:1.4}footer{text-align:center;color:#657078;font-size:9px;letter-spacing:1.5px;margin-top:30px}@media(max-width:380px){.hero h1{font-size:32px}.row{flex-direction:column}}
.removePhoto{margin:12px auto 0;display:block;background:transparent;color:#ffb0b0;border:1px solid #70454a;border-radius:22px;padding:10px 14px;font-weight:700}.removePhoto[hidden]{display:none}

.customize label{display:block;color:#c9d0d4;font-size:12px;font-weight:750;margin:16px 0 8px}
.swatches{display:flex;gap:10px;flex-wrap:wrap}
.swatch{width:38px;height:38px;border-radius:50%;background:var(--sw,#10171b);border:2px solid #44515a;color:#eee;font-weight:800}
.swatch.active{outline:2px solid #e7bd5b;outline-offset:3px;border-color:#0c1318}
.selection{margin-top:18px;padding:11px;border-radius:10px;background:#0b1216;color:#e7bd5b;font-size:12px;line-height:1.5}