:root{--background-color: #121212;--surface-color: #1E1E1E;--primary-text-color: #E0E0E0;--secondary-text-color: #BDBDBD;--accent-color: #B08D57;--accent-hover-color: #c7a36a;--error-color: #CF6679;--error-text-color: #ffcdd2;--success-color: #66bb6a;--pdf-button-color: #4CAF50;--pdf-button-hover-color: #43a047;--border-color: #333333;--input-background: #2c2c2c;--card-glow-color: rgba(176, 141, 87, .5);--progress-track-color: #444;--font-family: "Inter", sans-serif}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%}body{font-family:var(--font-family);background-color:var(--background-color);color:var(--primary-text-color);line-height:1.6;overscroll-behavior-y:contain}#root{min-height:100vh;display:flex;flex-direction:column}.app-container{width:100%;max-width:800px;margin:0 auto;padding:20px;flex-grow:1;display:flex;flex-direction:column}.app-header{padding:15px 20px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--border-color);position:relative}.app-header .app-logo{max-height:50px;width:auto}.step-indicator{color:var(--accent-color);font-weight:500;font-size:.95rem;position:absolute;left:50%;transform:translate(-50%);background-color:var(--surface-color);padding:3px 10px;border-radius:4px;border:1px solid var(--border-color)}.help-button{background-color:transparent;color:var(--accent-color);border:1px solid var(--accent-color);padding:6px 12px;font-size:.9rem;display:flex;align-items:center;gap:6px}.help-button:hover{background-color:#b08d571a}.help-button .help-icon{width:20px;height:20px}.progress-bar-container{display:flex;align-items:center;justify-content:space-between;width:100%;padding:20px 0;margin-bottom:20px}.progress-step{width:30px;height:30px;border-radius:50%;background-color:var(--input-background);border:2px solid var(--border-color);display:flex;align-items:center;justify-content:center;color:var(--secondary-text-color);font-weight:500;font-size:.9rem;transition:background-color .3s ease,border-color .3s ease,color .3s ease;position:relative;z-index:2}.progress-step.completed{background-color:var(--accent-color);border-color:var(--accent-color);color:#fff}.progress-step.active{border-color:var(--accent-hover-color);color:var(--accent-hover-color);transform:scale(1.1);box-shadow:0 0 8px var(--card-glow-color)}.progress-step.active .progress-step-number{font-weight:700}.progress-line{height:2px;background-color:var(--border-color);flex-grow:1;margin:0 -1px;transition:background-color .3s ease;position:relative;z-index:1}.progress-line.completed{background-color:var(--accent-color)}.welcome-screen,.report-screen,.form-screen{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px;background-color:var(--surface-color);border-radius:12px;box-shadow:0 8px 16px #0000004d;width:100%}.form-step-content{width:100%;animation:slideUpFadeIn .5s ease-out forwards}@keyframes slideUpFadeIn{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.welcome-screen h2,.report-screen h2{color:var(--accent-color);margin-bottom:20px;font-size:2.2rem}.welcome-screen>p{margin-bottom:20px;color:var(--secondary-text-color);max-width:600px;font-size:1.1rem}.report-screen p:not(.report-label):not(.retro-subtitle){margin-bottom:30px;color:var(--secondary-text-color);max-width:600px;font-size:1.1rem}.estimated-time-container{display:flex;align-items:center;justify-content:center;gap:8px;color:var(--secondary-text-color);font-size:.9rem;margin-bottom:25px;background-color:#ffffff08;padding:10px 15px;border-radius:6px;border:1px solid var(--border-color)}.estimated-time-icon{width:20px;height:20px;fill:currentColor}.estimated-time-text{margin-bottom:0;font-size:inherit;color:inherit}.music-form{width:100%;display:flex;flex-direction:column;gap:0}.form-section{background-color:var(--background-color);padding:25px;border-radius:8px;border:1px solid var(--border-color);text-align:left}.music-form>.form-section{animation:slideUpFadeIn .5s ease-out forwards}.form-section h2{color:var(--accent-color);margin-bottom:25px;padding-bottom:10px;border-bottom:1px solid var(--border-color);font-size:1.8rem;text-align:center}.form-group{margin-bottom:20px;text-align:left}.form-group label{display:block;margin-bottom:8px;color:var(--primary-text-color);font-weight:500;font-size:1rem}.form-group input[type=text],.form-group input[type=date],.form-group input[type=url],.form-group input[type=password],.form-group textarea{width:100%;padding:12px 15px;background-color:var(--input-background);border:1px solid var(--border-color);border-radius:6px;color:var(--primary-text-color);font-size:1rem;transition:border-color .3s ease,box-shadow .3s ease}.form-group input[type=date]{min-height:48px;cursor:pointer}.form-group input[type=text]:focus,.form-group input[type=date]:focus,.form-group input[type=url]:focus,.form-group input[type=password]:focus,.form-group textarea:focus{outline:none;border-color:var(--accent-color);box-shadow:0 0 0 2px #b08d574d}.form-group textarea{min-height:100px;resize:vertical}.input-error{border-color:var(--error-color)!important;box-shadow:0 0 0 2px #cf667966!important}.error-text{color:var(--error-text-color);font-size:.85rem;margin-top:5px}.selector-container{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:15px;margin-top:10px}.selectable-card{background-color:var(--input-background);border:2px solid var(--border-color);border-radius:8px;padding:15px;text-align:center;cursor:pointer;transition:all .3s ease;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100px;transform:translateZ(0);backface-visibility:hidden}.selectable-card:hover{border-color:var(--accent-hover-color)}.selectable-card.active{border-color:var(--accent-color);box-shadow:0 0 15px var(--card-glow-color);background-color:#252525}.selectable-card .icon{font-size:2rem;margin-bottom:8px;line-height:1}.selectable-card .card-name{font-size:.95rem;font-weight:500;color:var(--primary-text-color)}.selectable-card.genre-card{justify-content:flex-start}.preference-details{margin-top:15px;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}.preference-details input[type=range]{width:90%;cursor:pointer;accent-color:var(--accent-color)}input[type=range]{-webkit-appearance:none;-moz-appearance:none;appearance:none;height:8px;background:#444;border-radius:5px;outline:none}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:18px;height:18px;background:var(--accent-color);border-radius:50%;cursor:pointer;border:2px solid var(--surface-color)}input[type=range]::-moz-range-thumb{width:16px;height:16px;background:var(--accent-color);border-radius:50%;cursor:pointer;border:2px solid var(--surface-color)}.preference-value{font-size:.9em;color:var(--accent-color);font-weight:700}.other-genre-input-card{margin-top:10px;width:100%}.other-genre-input-card input[type=text]{width:100%;padding:8px 10px}.dynamic-list-item{display:flex;align-items:center;margin-bottom:10px}.dynamic-list-item input[type=text],.dynamic-list-item input[type=url]{flex-grow:1;margin-right:10px}.button{padding:12px 25px;border:none;border-radius:6px;font-size:1rem;font-weight:600;cursor:pointer;transition:background-color .3s ease,transform .1s ease,opacity .3s ease;text-decoration:none;display:inline-block;text-align:center}.button:disabled{background-color:var(--border-color);color:var(--secondary-text-color);cursor:not-allowed;opacity:.7}.button-primary{background-color:var(--accent-color);color:#fff}.button-primary:not(:disabled):hover{background-color:var(--accent-hover-color)}.button-primary:not(:disabled):active{transform:translateY(1px)}.button-secondary{background-color:var(--surface-color);color:var(--accent-color);border:1px solid var(--accent-color)}.button-secondary:not(:disabled):hover{background-color:#b08d571a}.button-danger{background-color:var(--error-color);color:#fff}.button-danger:hover{background-color:#d32f2f}.add-item-button{background-color:var(--success-color);color:#fff;margin-top:5px;font-size:.9rem;padding:8px 15px}.add-item-button:hover{background-color:#5a9e5d}.remove-item-button{background-color:var(--error-color);color:#fff;padding:10px 12px;font-size:.9rem;line-height:1}.remove-item-button:hover{background-color:#c62828}.button-pdf{background-color:var(--pdf-button-color);color:#fff}.button-pdf:hover{background-color:var(--pdf-button-hover-color)}.button-group{display:flex;gap:15px;justify-content:center;margin-top:30px;width:100%;flex-wrap:wrap}.form-navigation{justify-content:space-between;padding:0 10px}.toggle-switch-container{display:flex;flex-direction:column;align-items:center;margin-bottom:20px;padding:15px;background-color:#ffffff08;border-radius:8px}.toggle-label{font-size:1.3rem;color:var(--accent-color);margin-bottom:8px;font-weight:600}.switch-control{display:flex;align-items:center}.toggle-slider{width:50px;height:26px;background-color:#444;border-radius:13px;position:relative;cursor:pointer;transition:background-color .3s ease}.toggle-input:checked+.toggle-slider{background-color:var(--accent-color)}.toggle-knob{width:22px;height:22px;background-color:#fff;border-radius:50%;position:absolute;top:2px;left:2px;transition:transform .3s ease}.toggle-input:checked+.toggle-slider .toggle-knob{transform:translate(24px)}.retro-subtitle{font-size:.95rem;color:var(--secondary-text-color);margin-top:8px;text-align:center}.motivational-phrase{color:var(--accent-hover-color);font-style:italic;font-size:1.1rem;margin-bottom:25px;text-align:center}.report-screen{text-align:left}.report-summary{background-color:var(--background-color);padding:20px;border-radius:8px;margin-bottom:30px;border:1px solid var(--border-color)}.report-summary h3{color:var(--accent-color);margin-bottom:10px}.report-details-section{margin-bottom:25px}.report-details-section h3{color:var(--primary-text-color);font-size:1.3rem;margin-bottom:10px;padding-bottom:5px;border-bottom:1px solid var(--border-color)}.report-details-section p,.report-details-section ul{color:var(--secondary-text-color);margin-bottom:8px}.report-label{font-weight:600;color:var(--primary-text-color)}.report-details-section ul{list-style:disc;padding-left:20px}.report-details-section ul li{padding:5px 0;border-bottom:1px dashed var(--border-color)}.report-details-section ul li:last-child{border-bottom:none}.report-actions{margin-top:30px}.loading-indicator,.error-message{margin:20px 0;padding:15px;border-radius:6px;text-align:center;font-size:1.1rem;width:100%;background-color:var(--surface-color)}.loading-indicator{color:var(--accent-color);display:flex;flex-direction:column;align-items:center;justify-content:center}.error-message{color:#fff;background-color:var(--error-color)}.error-message .button{margin-top:15px}.loading-text{margin-bottom:20px;font-size:1.2rem;font-weight:500}.circular-progress-bar{width:120px;height:120px;position:relative}.circular-progress-bar svg{display:block;width:100%;height:100%}.progress-track{fill:none;stroke:var(--progress-track-color)}.progress-arc{fill:none;stroke:var(--accent-color);stroke-linecap:round;stroke-linejoin:round;animation:spin-progress 1.5s linear infinite;transform-origin:center}.progress-center-bg{fill:var(--surface-color)}@keyframes spin-progress{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.app-footer{text-align:center;padding:20px 0;margin-top:40px;color:var(--secondary-text-color);font-size:.9rem;border-top:1px solid var(--border-color)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border-width:0}.password-screen-container{display:flex;align-items:center;justify-content:center;position:fixed;top:0;left:0;width:100%;height:100%;background-color:var(--background-color);z-index:2000;padding:20px}.password-content{background-color:var(--surface-color);padding:30px 40px;border-radius:12px;box-shadow:0 8px 16px #0000004d;text-align:center;max-width:400px;width:100%;animation:slideUpFadeIn .5s ease-out forwards}.password-logo{height:50px;width:auto;margin-bottom:25px}.password-content h2{color:var(--primary-text-color);margin-bottom:10px;font-size:1.5rem}.password-content p{color:var(--secondary-text-color);margin-bottom:25px;font-size:1rem}.password-form{display:flex;flex-direction:column;gap:15px}.password-form .form-group{margin-bottom:0}.password-form .error-text{margin-top:8px;text-align:center}.password-form .button{margin-top:10px}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background-color:#000000bf;display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px;animation:fadeInModalOverlay .3s ease-out}@keyframes fadeInModalOverlay{0%{opacity:0}to{opacity:1}}.modal-content{background-color:var(--surface-color);padding:30px;border-radius:12px;box-shadow:0 10px 30px #00000080;max-width:700px;width:100%;max-height:85vh;overflow-y:auto;position:relative;color:var(--primary-text-color);animation:fadeInModalContent .3s ease-out .1s;animation-fill-mode:backwards;text-align:left}@keyframes fadeInModalContent{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}.modal-close-button{position:absolute;top:15px;right:15px;background:none;border:none;color:var(--secondary-text-color);font-size:2rem;cursor:pointer;line-height:1;padding:5px}.modal-close-button:hover{color:var(--primary-text-color)}.modal-title{color:var(--accent-color);font-size:1.8rem;margin-bottom:15px;text-align:center}.modal-intro,.modal-outro{color:var(--secondary-text-color);margin-bottom:20px;font-size:1.05rem;text-align:center}.modal-outro{margin-top:25px}.modal-steps-list{list-style:none;padding-left:0}.modal-steps-list li{margin-bottom:20px}.modal-steps-list h3{color:var(--accent-color);font-size:1.3rem;margin-bottom:8px;display:flex;align-items:center}.modal-steps-list p{margin-bottom:8px;line-height:1.7;color:var(--primary-text-color)}.modal-steps-list ul{list-style:disc;padding-left:25px;margin-top:5px}.modal-steps-list ul li{margin-bottom:5px;color:var(--secondary-text-color)}.modal-steps-list strong{color:var(--accent-color);font-weight:600}.modal-understand-button{display:block;margin:30px auto 0;width:fit-content}@media (max-width: 768px){.app-container{padding:15px}.app-header .app-logo{max-height:45px}.step-indicator{font-size:.85rem;padding:2px 8px}.help-button{padding:5px 10px;font-size:.85rem}.help-button .help-icon{width:18px;height:18px}.progress-step{width:26px;height:26px;font-size:.8rem}.progress-bar-container{padding:15px 0}.welcome-screen h2,.report-screen h2{font-size:1.8rem}.welcome-screen>p{font-size:1rem}.report-screen p:not(.report-label):not(.retro-subtitle){font-size:1rem}.estimated-time-container{font-size:.85rem;padding:8px 12px}.estimated-time-icon{width:18px;height:18px}.form-section h2{font-size:1.6rem}.selector-container{grid-template-columns:repeat(auto-fit,minmax(130px,1fr))}.button-group.form-navigation{flex-direction:row}.button-group.form-navigation .button{flex-grow:1;max-width:48%}.button-group.report-actions{flex-direction:column;align-items:center}.button-group.report-actions .button{width:100%;max-width:350px}.toggle-label{font-size:1.1rem}.motivational-phrase{font-size:1rem}.modal-content{padding:20px;max-height:90vh}.modal-title{font-size:1.6rem}.modal-steps-list h3{font-size:1.15rem}.modal-intro,.modal-outro,.modal-steps-list p,.modal-steps-list ul li{font-size:.95rem}}@media (max-width: 480px){.app-header{padding:10px 15px}.app-header .app-logo{max-height:40px}.step-indicator{display:none}.help-button{font-size:.8rem;padding:4px 8px;gap:4px}.help-button .help-icon{width:16px;height:16px}.progress-step{width:22px;height:22px;font-size:.7rem;border-width:1px}.progress-line{height:1px}.progress-bar-container{padding:10px 0;margin-bottom:15px}.estimated-time-container{flex-direction:column;gap:5px;text-align:center}.form-section{padding:20px 15px}.form-section h2{font-size:1.4rem}.selector-container{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.selectable-card{padding:10px;min-height:80px}.selectable-card .icon{font-size:1.5rem}.selectable-card .card-name{font-size:.85rem}.dynamic-list-item{flex-direction:column;align-items:stretch}.dynamic-list-item input[type=text],.dynamic-list-item input[type=url]{margin-right:0;margin-bottom:5px}.remove-item-button{width:100%}.button-group.form-navigation{flex-direction:column;gap:10px}.button-group.form-navigation .button{width:100%;max-width:none}.button-group.report-actions .button{max-width:none}.modal-content{padding:15px;border-radius:8px}.modal-title{font-size:1.4rem}.modal-steps-list h3{font-size:1.1rem}.modal-intro,.modal-outro,.modal-steps-list p,.modal-steps-list ul li{font-size:.9rem}.modal-close-button{top:8px;right:8px;font-size:1.8rem}}