:root{--primary:#828c79;--bg:#65735c;--card:#a0a697;--text-light:#f2f1eb;--text-dark:#3e4639;--border:#babfb0}body{background-color:var(--bg);color:var(--text-light);height:100vh;margin:0;font-family:Inter,system-ui,sans-serif;overflow:hidden}.app-container{box-sizing:border-box;flex-direction:column;max-width:900px;height:100vh;margin:0 auto;padding:2vh 20px;display:flex}.results-page{height:auto;min-height:100vh;overflow-y:auto}body:has(.results-page){height:auto;overflow-y:auto}.quiz-header{text-align:center;margin-bottom:2vh}.progress-container{background:#ffffff1a;border-radius:10px;width:100%;height:6px;margin-bottom:5px;overflow:hidden}.progress-fill{background:var(--text-light);height:100%;transition:width .5s}.step-counter{color:var(--border);font-size:.8rem}.quiz-main{flex-direction:column;flex:1;justify-content:center;min-height:0;display:flex}.block-question{background:var(--card);text-align:center;color:var(--text-dark);border-radius:24px;padding:3vh 30px;box-shadow:0 20px 40px #0003}.question-title{margin-bottom:3vh;font-size:1.5rem;font-weight:700}.options-grid{flex-wrap:nowrap;justify-content:center;gap:12px;display:flex}.btn-option{border:2px solid var(--border);cursor:pointer;max-width:130px;height:22vh;color:var(--text-dark);background:#fff3;border-radius:18px;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:10px;transition:all .3s;display:flex}.btn-option.selected{background:var(--primary);border-color:var(--text-light);color:var(--text-light);transform:scale(1.03)}.result-title{text-align:center;color:var(--text-light);margin:4vh 0;font-size:1.8rem}.playlists-grid{flex-direction:column;gap:20px;width:100%;max-width:700px;margin:0 auto;display:flex}.playlist-card{background:var(--card);cursor:pointer;border-radius:24px;align-items:center;gap:25px;min-height:130px;padding:15px 25px;transition:all .3s;display:flex;box-shadow:0 10px 20px #0000001a}.playlist-card:hover{background:var(--primary);color:var(--text-light);transform:translate(10px)}.thumb-grid{border-radius:12px;grid-template-rows:1fr 1fr;grid-template-columns:1fr 1fr;gap:4px;width:100px;min-width:100px;height:100px;display:grid;position:relative;overflow:hidden}.thumb-grid img{object-fit:cover;width:100%;height:100%}.play-overlay{opacity:0;color:#fff;background:#0006;justify-content:center;align-items:center;transition:all .3s;display:flex;position:absolute;inset:0}.playlist-card:hover .play-overlay{opacity:1}.playlist-info h3{color:inherit;margin:0;font-size:1.4rem}.play-hint{opacity:.7;font-size:.8rem}.fullscreen-video{z-index:9999;background:#000;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.video-player{object-fit:contain;width:100%;height:100%}.close-video{color:#fff;cursor:pointer;z-index:10000;background:#fff3;border:none;border-radius:50%;justify-content:center;align-items:center;width:50px;height:50px;display:flex;position:absolute;top:20px;right:20px}.nav-zone{justify-content:space-between;align-items:center;min-height:40px;margin-top:2vh;display:flex}.btn-nav{border:1px solid var(--border);color:var(--text-light);cursor:pointer;background:0 0;border-radius:12px;padding:10px 25px;font-weight:600}.btn-generate{background:var(--text-light);color:var(--bg);cursor:pointer;border:none;border-radius:50px;padding:15px 40px;font-weight:800}.icon-svg{font-size:2rem}.option-label{margin-top:5px;font-size:.75rem;font-weight:600}.color-preview{border:2px solid var(--text-light);border-radius:50%;width:40px;height:40px}.animated{animation:2s infinite pulse}@keyframes pulse{0%{box-shadow:0 0 #f2f1eb66}70%{box-shadow:0 0 0 12px #f2f1eb00}}