:root{--font-family: "Space Grotesk", sans-serif;--background-color: #101010;--footer-background: rgba(22, 22, 22, .75);--card-background: #1C1C1C;--text-primary: #FFFFFF;--text-secondary: #A0A0A0;--border-color: #333333;--accent-color: #FFFFFF;--button-primary-bg: #FFFFFF;--button-primary-text: #000000;--button-secondary-bg: #282828}*{box-sizing:border-box;margin:0;padding:0}html,body{width:100%;height:100%;background-color:var(--background-color);color:var(--text-primary);font-family:var(--font-family);font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{width:100%;min-height:100%;display:flex;flex-direction:column;align-items:center}#app{width:100%;max-width:700px;padding:2rem 1rem 10rem;display:flex;flex-direction:column;gap:2rem}header{text-align:center}header h1{font-size:2rem;font-weight:700;margin-bottom:.5rem}header p{color:var(--text-secondary);font-size:1rem}#previews-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:1rem}.image-preview{position:relative;width:100%;aspect-ratio:1 / 1}.image-preview img{width:100%;height:100%;object-fit:cover;border-radius:12px;border:1px solid var(--border-color)}.remove-image-button{position:absolute;top:8px;right:8px;width:32px;height:32px;background-color:#0009;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease}.remove-image-button:hover{background-color:#000c;transform:scale(1.1)}#output-container{width:100%;border-radius:16px;border:2px dashed var(--border-color);min-height:300px;display:flex;align-items:center;justify-content:center;overflow:hidden}.output-placeholder{width:100%;height:100%;color:var(--text-secondary);text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem}.generated-image-container{width:100%;position:relative}.download-button{position:absolute;top:1rem;right:1rem;width:40px;height:40px;background-color:#0009;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background-color .2s ease,transform .2s ease;color:#fff}.download-button:hover{background-color:#000c;transform:scale(1.1)}#generated-image-element{display:block;width:100%;height:auto;opacity:0}#generated-image-element.reveal{animation:revealImage .8s cubic-bezier(.25,.46,.45,.94) forwards}@keyframes revealImage{0%{opacity:0;transform:scale(.95);filter:blur(10px)}to{opacity:1;transform:scale(1);filter:blur(0)}}.skeleton-loader{background-color:var(--card-background);color:var(--text-primary);width:80%;max-width:300px;border-radius:16px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;min-height:80px;border:1px solid var(--border-color)}.skeleton-loader-liquid{background-color:#2a2a2a;width:100%;height:100%;position:absolute;top:0;left:0;box-shadow:inset 0 0 15px #00000080}.skeleton-loader-liquid:before,.skeleton-loader-liquid:after{content:"";width:250%;height:250%;position:absolute;top:-220%;left:-75%;background:var(--card-background)}.skeleton-loader-liquid:before{border-radius:45%;animation:skeleton-animate 5s linear infinite;z-index:1}.skeleton-loader-liquid:after{border-radius:40%;opacity:.7;animation:skeleton-animate 5s linear infinite reverse;z-index:2}.skeleton-loader-text{position:relative;z-index:3;font-size:1rem;color:var(--text-secondary)}@keyframes skeleton-animate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}#suggestions-container{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.5rem}#action-buttons-container{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem}.suggest-button{background-color:transparent;color:var(--text-primary);border:1px solid var(--border-color);padding:.75rem 1.5rem;border-radius:99px;cursor:pointer;font-family:var(--font-family);font-size:1rem;transition:background-color .2s ease,border-color .2s ease;display:flex;align-items:center;justify-content:center;min-width:150px;white-space:nowrap}.suggest-button:hover{background-color:var(--card-background);border-color:#555}.suggest-button:disabled{opacity:.6;cursor:not-allowed;background-color:transparent;border-color:var(--border-color)}.pose-cards-grid{width:100%;display:grid;grid-template-columns:1fr;gap:1rem}.pose-card{background-color:var(--card-background);padding:1.5rem;border-radius:16px;border:1px solid var(--border-color);cursor:pointer;transition:transform .3s ease,box-shadow .3s ease;display:flex;flex-direction:column;gap:.75rem}.pose-card:hover{transform:translateY(-5px);box-shadow:0 10px 20px #0003}.pose-card-icon{color:var(--text-secondary)}.pose-card h3{font-size:1.1rem;font-weight:600}.pose-card p{color:var(--text-secondary);line-height:1.5}#app-footer{position:fixed;bottom:0;left:0;right:0;background:var(--footer-background);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-top:1px solid var(--border-color);padding:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.75rem;align-items:center;max-width:700px;margin:0 auto}#app-footer input[type=text]{grid-column:1 / -1;width:100%;background-color:transparent;border:none;border-bottom:1px solid var(--border-color);color:var(--text-primary);font-family:var(--font-family);font-size:1rem;padding:.5rem .25rem;transition:border-color .2s ease}#app-footer input[type=text]:focus{outline:none;border-bottom-color:var(--accent-color)}.primary-button,.secondary-button{padding:.75rem 1.25rem;border-radius:99px;border:none;cursor:pointer;font-family:var(--font-family);font-size:1rem;font-weight:500;display:flex;align-items:center;justify-content:center;gap:.5rem;transition:transform .2s ease;white-space:nowrap}.primary-button:hover,.secondary-button:hover{transform:scale(1.05)}.primary-button{background-color:var(--button-primary-bg);color:var(--button-primary-text)}.secondary-button{background-color:var(--button-secondary-bg);color:var(--text-primary)}.primary-button:disabled,.secondary-button:disabled{opacity:.6;cursor:not-allowed;transform:none}.credit-footer{width:100%;text-align:center;padding:1rem;font-size:.9rem;color:var(--text-secondary)}.credit-footer p{margin-bottom:.5rem}.credit-footer p a{color:var(--text-secondary);text-decoration:none;transition:color .2s ease;display:inline-flex;align-items:center;gap:.3rem}.credit-footer a:hover{color:var(--text-primary)}.credit-footer svg{margin-bottom:-2px}.error-message{color:#ff4d4d;text-align:center}.config-error{border:1px solid #ff4d4d;background-color:#ff4d4d1a;color:#ffeded;padding:1.5rem;border-radius:12px;text-align:center}.config-error h1{font-size:1.5rem;margin-bottom:.5rem;color:#ff8f8f}.config-error p{line-height:1.6}.config-error code{background-color:#00000080;padding:.2rem .4rem;border-radius:4px;font-family:monospace}.spinner-small{width:20px;height:20px;border:2px solid rgba(0,0,0,.3);border-top-color:#000;border-radius:50%;animation:spin 1s linear infinite}.suggest-button .spinner-small{border:2px solid rgba(255,255,255,.3);border-top-color:#fff}@keyframes spin{to{transform:rotate(360deg)}}@media (min-width: 500px){#app-footer{grid-template-columns:1fr auto auto}#app-footer input[type=text]{grid-column:auto}}@media (min-width: 600px){.pose-cards-grid{grid-template-columns:repeat(2,1fr)}}
