:root{--font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";--primary-color: #007bff;--primary-color-dark: #0056b3;--secondary-color: #6c757d;--background-color-dark: #121212;--text-color-dark: #e0e0e0;--card-bg-dark: #1e1e1e;--border-color-dark: #333333;--success-color: #28a745;--danger-color: #dc3545;--background-color: var(--background-color-dark);--text-color: var(--text-color-dark);--card-bg: var(--card-bg-dark);--border-color: var(--border-color-dark)}body{margin:0;font-family:var(--font-sans);background-color:var(--background-color);color:var(--text-color);line-height:1.6}#root{display:flex;flex-direction:column;min-height:100vh;max-width:500px;margin:0 auto;box-shadow:0 0 20px #0000001a;background-color:var(--card-bg)}.app-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;background-color:var(--primary-color);color:#fff;position:sticky;top:0;z-index:100;min-height:60px;box-sizing:border-box}.header-title-container{text-align:center}.header-title-container h1{margin:0;font-size:1.2rem}.header-subtitle{margin:0;font-size:.75rem;font-weight:400;opacity:.9}.header-spacer{width:38px}.lang-toggle{background:#fff3;border:none;color:#fff;padding:.2rem .5rem;border-radius:5px;cursor:pointer;font-weight:700;min-width:38px;height:28px;font-size:.8rem}.page{padding:1.5rem;flex-grow:1;display:flex;flex-direction:column;animation:fadeIn .5s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.page-title{margin-top:0;text-align:center;color:var(--primary-color)}.intent-message{background-color:var(--background-color);border:1px solid var(--border-color);border-left:4px solid var(--success-color);padding:1rem;margin-bottom:1.5rem;border-radius:4px}.intent-message p{margin:0;text-align:center;font-size:.9rem}.disclaimer{background-color:var(--background-color);border:1px solid var(--border-color);border-radius:8px;padding:1rem 1.5rem;margin:1.5rem 0;text-align:left;margin-top:auto}.disclaimer h4{margin-top:0;margin-bottom:1rem;color:var(--text-color);font-size:1.1rem;text-align:center}.disclaimer-point{margin-bottom:1rem}.disclaimer-point:last-child{margin-bottom:0}.disclaimer-point strong{display:block;margin-bottom:.25rem;color:var(--text-color);font-size:.9rem}.disclaimer-point p{margin:0;font-size:.85rem;color:var(--secondary-color)}.tips{background-color:var(--background-color);border:1px solid var(--border-color);border-left:4px solid var(--primary-color);padding:1rem;margin:1.5rem 0;border-radius:4px}.tips ul{padding-left:1.2rem;margin:0}.button-group{display:flex;flex-direction:column;gap:1rem;margin-top:1.5rem}.page>.button-group{margin-top:auto}.btn{display:flex;align-items:center;justify-content:center;gap:.75rem;width:100%;padding:1rem;font-size:1rem;font-weight:700;text-align:center;border:none;border-radius:8px;cursor:pointer;transition:all .2s ease-in-out;text-decoration:none;color:#fff}.btn svg{width:1.2em;height:1.2em}.btn-primary{background-color:var(--primary-color)}.btn-primary:hover{background-color:var(--primary-color-dark)}.btn-secondary{background-color:var(--secondary-color);color:#fff}.btn-success{background-color:var(--success-color)}.btn-danger{background-color:var(--danger-color)}.filter-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:.5rem;margin-bottom:1.5rem}.filter-controls select{width:100%;padding:.5rem;border:1px solid var(--border-color);border-radius:4px;background-color:var(--card-bg);color:var(--text-color)}.style-gallery{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.style-card{position:relative;border:1px solid var(--border-color);border-radius:8px;overflow:hidden;cursor:pointer;transition:transform .2s,box-shadow .2s;background:var(--card-bg);display:flex;flex-direction:column}.style-card:hover{transform:translateY(-5px);box-shadow:0 4px 15px #0000001a}.style-card img{width:100%;height:120px;object-fit:cover;background-color:#ccc}.style-card-info{padding:.75rem;flex-grow:1}.style-card-info h3{margin:0 0 .25rem;font-size:.9rem}.style-card-info p{margin:0;font-size:.8rem;color:var(--secondary-color)}.style-card-details-btn{background-color:var(--background-color);border:1px solid var(--border-color);border-top-left-radius:8px;border-bottom-right-radius:8px;color:var(--text-color);cursor:pointer;padding:.3rem .8rem;font-size:.8rem;position:absolute;bottom:0;right:0;transition:background-color .2s}.style-card-details-btn:hover{background-color:var(--border-color)}.preview-user-photo-container{margin-bottom:1.5rem}.preview-user-photo-container img{display:block;width:100%;max-width:350px;margin:0 auto;border-radius:12px;border:3px solid var(--border-color)}.preview-style-selection-card{background-color:var(--background-color);border-radius:8px;padding:1rem;margin-bottom:1.5rem;text-align:center}.preview-style-selection-card h4{margin:0 0 .75rem;font-size:1rem;color:var(--secondary-color)}.preview-style-selection-card img{width:80px;height:80px;border-radius:8px;object-fit:cover;margin-bottom:.5rem}.preview-style-selection-card p{margin:0;font-weight:700}.generation-prompt-info{text-align:center;margin-bottom:1.5rem;margin-top:1.5rem;color:var(--secondary-color)}.color-selector-container{background:var(--background-color);padding:1rem;border-radius:8px;margin-bottom:1rem;text-align:center}.color-selector-container h4{margin:0 0 .75rem;font-size:1rem}.color-palette{display:flex;justify-content:center;flex-wrap:wrap;gap:.75rem}.color-swatch{width:35px;height:35px;border-radius:50%;border:2px solid var(--border-color);cursor:pointer;transition:transform .2s,border-color .2s;font-weight:700;color:#fff;display:flex;align-items:center;justify-content:center;text-shadow:1px 1px 2px rgba(0,0,0,.5)}.color-swatch:hover{transform:scale(1.1)}.color-swatch.active{border-color:var(--primary-color);transform:scale(1.15);box-shadow:0 0 10px var(--primary-color)}.facial-hair-container{background:var(--background-color);padding:1rem;border-radius:8px;margin-bottom:1rem;text-align:center}.facial-hair-container h4{margin:0 0 .75rem;font-size:1rem}.facial-hair-options{display:flex;justify-content:center;flex-wrap:wrap;gap:.5rem}.facial-hair-btn{padding:.5rem 1rem;border:1px solid var(--border-color);background-color:var(--card-bg);color:var(--text-color);border-radius:20px;cursor:pointer;transition:all .2s ease;font-size:.9rem}.facial-hair-btn.active{background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.result-image-gallery{display:flex;gap:1rem;margin-bottom:1.5rem;overflow-x:auto;padding-bottom:1rem;scrollbar-width:thin;scrollbar-color:var(--primary-color) var(--background-color)}.gallery-item{flex:0 0 150px;text-align:center}.gallery-item img{width:100%;border-radius:8px;border:1px solid var(--border-color);margin-bottom:.5rem;aspect-ratio:1 / 1;object-fit:cover}.gallery-item p{margin:0;font-weight:700;color:var(--secondary-color)}.result-section{margin-bottom:1.5rem}.result-section h3{border-bottom:2px solid var(--primary-color);padding-bottom:.5rem;margin-bottom:1rem}.barber-notes{background-color:var(--background-color);padding:1rem;border-radius:8px;white-space:pre-wrap;font-family:monospace;max-height:200px;overflow-y:auto;border:1px solid var(--border-color)}.back-button{background:none;border:none;color:var(--primary-color);cursor:pointer;font-size:1rem;padding:.5rem 0;margin-bottom:1rem;align-self:flex-start}.loading-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000b3;display:flex;justify-content:center;align-items:center;z-index:1000;color:#fff;flex-direction:column}.spinner{border:4px solid rgba(255,255,255,.3);border-radius:50%;border-top:4px solid #fff;width:40px;height:40px;animation:spin 1s linear infinite;margin-bottom:1rem}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#0009;display:flex;justify-content:center;align-items:center;z-index:1001;animation:fadeIn .3s}.modal-content{background-color:var(--card-bg);padding:2rem;border-radius:8px;width:90%;max-width:450px;position:relative;box-shadow:0 5px 25px #0003}.modal-close-btn{position:absolute;top:10px;right:15px;background:none;border:none;font-size:1.8rem;cursor:pointer;color:var(--secondary-color)}.modal-content h3{margin-top:0;color:var(--primary-color)}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}